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}'
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值