axios发送post请求，springMVC接收不到数据

axios发送post请求，springMVC接收不到数据

一、后端无法接收单个数据：

1. 前端axios

updateOrderFlag(id){
  axios.post('/order/updateOrderFlag.do', {
    id: id
  })
}

2. 后端接收

@PostMapping("/updateOrderFlag.do")
public void updateOrderFlag(Long id){
   System.out.println(id);
}

3. 后端输出结果为null
   但通过前端的测试，前端是可以获取到updateOrderFlag(id)传过来的id，可知是axios传参出错

二、发生原因

1.我们可以打开开发者工具，看看axios的请求的请求头详情，发现Request-Headers的Content-Type是application/json;charset=UTF-8，即告知浏览器我们发送过去的内容为json格式。
2. 因为接收的数据格式为json，此时我们想到在后端接收数据时加上@RequestBody

@PostMapping("/updateOrderFlag.do")
public void updateOrderFlag(@RequestBody Long id){
   System.out.println(id);
}

此时输出结果为：{“id”:“xxx”}，无法获取到其中的数据，此方法不行

1. 通过jquery-API可以看到ajax的请求头信息为： “application/x-www-form-urlencoded”，而axios的的格式为json
   
2. 将请求头的信息改为 headers:{ ‘Content-Type’:‘application/x-www-form-urlencoded’ }，试验可知，输出的结果为null还是不行

test(id){
    axios({
        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        },
        method: 'post',
        url: '/order/testupdateOrderFlag.do',
        data: {no:id}
    }).then(function(resp){
        console.log(id)
    });
}

三、解决方法一：需要使用qs插件

1. 安装qs

npm install qs

2. 页面引入qs

<script src="//cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>

3. html页面进行传参，使用qs.stringify(param))方法
   qs.stringify()将对象序列化成URL的形式，以&进行拼接

methods:{
    deleteOrder(id){
        //创建qs
        var qs = Qs;
        var param={id:id};
        axios.post('/order/deleteOrder.do', qs.stringify(param)).then(function(resp){
            alert("删除该记录成功");
        });
    }
}

4. 后台接收

@PostMapping("deleteOrder.do")
public void deleteOrder(String id){
    System.out.println(id);
}

5. 后台接收结果
   
6. 使用qs.parse(param)的方法
   qs.parse()将URL(param=“id=012”)解析成对象的形式(id:012)
   后台接收数据使用@RequestBody ，得到数据{“id”：“012”}

methods: {
    deleteOrder(id){
        //创建qs
        var qs = Qs;
        var param={id:id};
        axios.post('/order/deleteOrder.do', qs.parse(param)).then(function(resp){
            alert("删除该记录成功");
        });
    }
}

四、解决方法二：使用URLSearchParams()

1. 前端

updateOrderFlag(id){
	var param = new URLSearchParams();
	param.append("id", id);
	axios.post('/order/updateOrderFlag.do', param)
	.then(function(resp){
		alert("post传参成功");
	});
}

2. 后端接收：

@PostMapping("/updateOrderFlag.do")
public void updateOrderFlag(Long id){
   System.out.println(id);
}

五、解决方法三：传对象过去再获取对象的id

1. 前端

updateOrderFlag(obj){
    var _this=this;
    this.order = obj;
    axios.post('/order/updateOrderFlag.do', this.order).then(function(resp){
        alert("删除该记录成功");
    });
}

2. 后端接收

@PostMapping("addDesigner.do")
public void addDesigner(@RequestBody  OrderModel model){
    System.out.println(model.id);
}