Vue+axios向后端post JSON数据(报错:400)，不使用qs.stringify()格式化实现方式

Vue+axios向后端post JSON数据，不使用QS格式化实现方式(后端使用@RequestBody接收参数)

axios向后端post请求时出现400，debug发现jquery的ajax请求和axios的post请求默认的请求头不一样(Content-Type)。 jquery的post请求： axios的post请求： 按照度娘所说，可以设置axios的请求头。

//提交更新用户 updateUser:function(){ //保存this let that = this; if(this.userUpdateInfo.uname == '' || this.userUpdateInfo.upwd == ''){ alert("用户名和密码不得为空！") }else { this.userUpdateInfo.usex = $("input[name='updateusersex']:checked").val(); axios.post('/user/update',this.userUpdateInfo,{headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}}) // axios.post('/user/update',this.userUpdateInfo) .then(function (response) { // console.log(response); that.userUpdateIsShow = false; if (response.data != "" && response.data == "success"){ alert("信息更新成功"); if (that.showPos == 4){ that.getUserListAll(); }else { that.getUserList(that.UserID); } }else{ alert("信息更新失败"); } },function (err) { console.log(err); }) } },

请求头成功改变，但数据默认被格式化(结尾默认会存在’:’)，后台用*@RequestParam*无法正常读取参数，应该是要用qs.stringify格式化后就没有问题了(stringify方法可以将一个json对象直接转为：以?和&符连接的形式)，由于没有打算深入学习前端的计划，vue是直接引用的，没学会怎么import qs，就在尝试其他方法格式化数据。 (按照qs.stringify的格式手动从外层打包一下数据应该也可以实现,于是就有了方法一) 方法一：(利用连接符格式化对象，不用改变后台接口) 因为使用qs.stringify格式化后，POST的JSON对象就可以被后台读取了，那为了去除格式化后的’ : '，那直接手动格式化它就好了。 像这样：let data = "ObjectUser=" + JSON.stringify(this.userUpdateInfo); 发送的时候直接这样：axios.post('/user/updateUser',data,{headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}}) 嗯，把请求头设置成与jquery的ajax一样的，稍微格式化一下，后台接收到的参数就跟jquery发送的ajax请求数据一毛一样了。 放一下代码吧，毕竟尝试了半天。 axios的POST请求：

//提交更新用户 updateUser:function(){ //保存this let that = this; if(this.userUpdateInfo.uname == '' || this.userUpdateInfo.upwd == ''){ alert("用户名和密码不得为空！") }else { this.userUpdateInfo.usex = $("input[name='updateusersex']:checked").val(); let data = "ObjectUser=" + JSON.stringify(this.userUpdateInfo); axios.post('/user/updateUser',data,{headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}}) .then(function (response) { // console.log(response); that.userUpdateIsShow = false; if (response.data != "" && response.data == "success"){ alert("信息更新成功"); if (that.showPos == 4){ that.getUserListAll(); }else { that.getUserList(that.UserID); } }else{ alert("信息更新失败"); } },function (err) { console.log(err); }) } },

后台接收参数：(咳咳，这个后台写的比较早，凑合看，表嫌弃)

// 更新用户信息 @RequestMapping("/user/updateUser") @ResponseBody public String updateUser(@RequestParam String ObjectUser){ JSONObject JsonUser = JSONObject.fromObject(ObjectUser); User user = new User(); user.setUid(JsonUser.getInt("uid")); user.setUname(JsonUser.getString("uname")); user.setUpwd(JsonUser.getString("upwd")); user.setUtext(JsonUser.getString("utext")); user.setUsex(JsonUser.getString("usex")); int result = userService.UpdateUser(user); if (result != 0){ return "success"; }else{ return ""; } }

方法二：(改用@RequestBody接收，前端默认依然使用json格式发送) 后端改用@RequestBody接收后，前端直接axios.post(’/user/update’,this.userUpdateInfo)，把前端的Object塞进去就好了

前端axios POST:

//提交更新用户 updateUser:function(){ //保存this let that = this; if(this.userUpdateInfo.uname == '' || this.userUpdateInfo.upwd == ''){ alert("用户名和密码不得为空！") }else { this.userUpdateInfo.usex = $("input[name='updateusersex']:checked").val(); axios.post('/user/update',this.userUpdateInfo) .then(function (response) { // console.log(response); that.userUpdateIsShow = false; if (response.data != "" && response.data == "success"){ alert("信息更新成功"); if (that.showPos == 4){ that.getUserListAll(); }else { that.getUserList(that.UserID); } }else{ alert("信息更新失败"); } },function (err) { console.log(err); }) } },

后端的@RequestBody

//更新用户信息 @RequestMapping("/user/update") @ResponseBody public String updateUser(@RequestBody User user){ int result = userService.UpdateUser(user); if (result != 0){ return "success"; }else { return ""; } }

方法三：(content-type设为：text/plain，感觉靠谱，正在实现) content-type设为：text/plain，数据可以正常格式化，接口暂时未能正常响应。大家可以尝试一下 关于qs.stringify()和JSON.stringify()

let a = {name:'bb',age:88}; qs.stringify(a) // 'name=bb&age=88' JSON.stringify(a) // '{"name":"bb","age":88}'