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

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);
                    })
            }

        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

请求头成功改变，但数据默认被格式化(结尾默认会存在’:’)，后台用*@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);
                    })
            }

        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

    //    更新用户信息
    @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 "";
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

方法二：(改用@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);
                    })
            }

        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

后端的@RequestBody

    //更新用户信息
    @RequestMapping("/user/update")
    @ResponseBody
    public String updateUser(@RequestBody User user){
        int result = userService.UpdateUser(user);
        if (result != 0){
            return "success";
        }else {
            return "";
        }
    }
1
2
3
4
5
6
7
8
9
10
11

方法三：(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}'
1
2
3
4
5