使用vue的Post方式提交数据遇到的坑

使用vue的Post方式提交数据遇到的坑

  • vue的Post方式
    • 遇到的一些问题
      • 1.ajax请求数据格式不规范问题
        • Caused by: com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'name': was expecting ('true', 'false' or 'null')

vue的Post方式

前端提交方式:

  import axios from 'axios'
  import qs from 'qs'

          axios.post(
            "/mybatis-service/process/xxxxxx/xxxxx",
            JSON.stringify(this.dataMap),{
            headers: {
             // 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' 如果使用上面的方式会报415 数据类型异常的问题
             
             'Content-Type':'application/json; charset=UTF-8'
            }
          }).then((res)=>{
            let value=res.data
           console.log(value)
           alert("保存成功!")

          }).catch((error)=>{
            console.log(error)
          })

后端代码:

	@SuppressWarnings({ "rawtypes", "unchecked" })
	@PostMapping("/xxxxxxx/xxxx")
	public TbConContractInfoPo updateConInfo(@RequestBody HashMap dataMap) {
		System.err.println("拿到数据了![map]=" + dataMap);
		return conInfoCreateDao.update(dataMap);
	}

遇到的一些问题

1.ajax请求数据格式不规范问题

Caused by: com.fasterxml.jackson.core.JsonParseException: Unrecognized token ‘name’: was expecting (‘true’, ‘false’ or ‘null’)

出现这个问题一般是发送的 json object 不符合 json 规范,后台无法解析。
注意你的写法:

用 param = JSON.stringify( param ); 这个函数将动态的 json object 转换成 json
string 去发送 axios ajax 请求,就可以完成功能了

前端写法1:

var allData = {
          name:"张三",
          age:20
         };
$.ajax({
            type: "POST",
            url: "xxxx",
            contentType:‘application/json;charset=utf-8‘,
            data:JSON.stringify(allData),
            success: function (data) {
                alert(data);
            }
        });

前端写法2:

          axios.post(
            "/xxxxxx/xxx/xxxx",
            JSON.stringify(this.dataMap),{
            headers: {
             'Content-Type':'application/json; charset=UTF-8'
            }
          }).then((res)=>{
            let value=res.data
           console.log(value)
           alert("保存成功!")

          }).catch((error)=>{
            console.log(error)
          })


这里要注意的是,使用的是

JSON.stringify()

不是

qs.stringify()

参考地址:
[1] https://blog.csdn.net/beguile/article/details/60337608
[2] https://blog.csdn.net/dongyuguoai/article/details/81206179
[3] http://www.bubuko.com/infodetail-1981257.html

你可能感兴趣的:(javaweb,vueJs,axios)