Vue.js + axios发post请求时后端接收不到参数解决办法

前天,我用axios发送post请求的时候,后台一直接收不到我的值,于是我上网找了几种解决方法,在这里记录一下,当我们进行post 请求的时候,axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 

一、URLSearchParams构造方法(推荐)

register() {
            if (!this.form.peopleName) {
				this.$message.error('请输入用户名');
				return false;
			};
            if (!this.form.peoplePassword) {
				this.$message.error('请输入密码');
				return false;
			};
            if (!this.form.checkpass) {
				this.$message.error('请再次输入密码');
				return false;
			};
            if (this.form.checkpass!==this.form.peoplePassword) {
				this.$message.error('两次输入密码不一致!');
				return false;
			};
            console.log(5633333)
            var params = new URLSearchParams();
            params.append('peopleName', this.form.peopleName);       //你要传给后台的参数值 key/value
            params.append('peoplePassword', this.form.peoplePassword);
            this.$axios({
                method:"post",
                // method:"get",
                url:'http://172.16.105.11:8080/tdt-xz/addUser.go',
                data:params,
                
            }).then((res)=>{
                console.log(res,333)
                if(res.data.status==0){
                    this.$message.success('注册成功,请登录')
                    // this.$router.go(-1);//返回上一层级的路由
                    this.jumplogin();
                }
                else{
                    this.$message.error("用户名已经存在,重新注册")
                }

            })
        },

他给后台传入的值我觉得更规范,是如下图所示的样子 

 

 二、 transformRequest: [function (data) {   
                        let ret = ''
                        for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],

// `transformRequest`允许在请求数据发送到服务器之前对其进行更改

// 这只适用于请求方法'PUT','POST'和'PATCH'

// 数组中的最后一个函数必须返回一个字符串,一个 ArrayBuffer或一个 Stream

 getfwlist(){
                this.$axios({
                    method:"post",
                    url:"http://www.baidu.gov.cn/queryServlet",
                    // url:"http://tdt-xz.geo-compass.com/fwzy/queryServlet",
                    headers:{
                        'Content-type': 'application/x-www-form-urlencoded'
                    },
                    data:{
                        mn: 'GetServerListByPage',
                        keywords: this.fwlx,
                        pageNum: this.page.pageNo,
                        pageSize: this.page.pageSize,
                        keyname: "pageview",
                        sort: 'desc',
                        searchText: this.namekey,
                        state: 1,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then((res)=>{
                    
                })
        },

 

这种传入的方式有些后台就能收到,有些就不行

三、qs

首先引入 npm install qs --save

然后在main文件中引用下面的话

import qs from 'qs';

Vue.prototype.$qs = qs

userLogin() {
            if (!this.form.username) {
				this.$message.error('请输入用户名');
				return false;
			};
            if (!this.form.password) {
				this.$message.error('请输入密码');
				return false;
			};
            if (this.form.code.toUpperCase() !== this.yzmz.toUpperCase()) {
				this.$message.error('验证码错误,请重新输入');
				return false;
			};


            let data = this.$qs.stringify({
                username:this.form.username,
                password:this.form.password,
                code:this.form.code,
            });
            this.$axios({
                method: 'post',
                url:' http://172.16.105.11:8080/tdt-xz/login.go',
                data:data
            }).then((res)=>{
                console.log(res,333)
                if(res.data.status==0){
                    this.$message.success("登录成功")  
                    this.jumphome();
                }
                else{
                    this.$message.error("用户名或密码错误")

                }
            });
        },

如果这样不行就加上header

userLogin() {
            if (!this.form.username) {
				this.$message.error('请输入用户名');
				return false;
			};
            if (!this.form.password) {
				this.$message.error('请输入密码');
				return false;
			};
            if (this.form.code.toUpperCase() !== this.yzmz.toUpperCase()) {
				this.$message.error('验证码错误,请重新输入');
				return false;
			};


            let data = this.$qs.stringify({
                username:this.form.username,
                password:this.form.password,
                code:this.form.code,
            });
            this.$axios({
                method: 'post',
                url:' http://172.16.105.11:8080/tdt-xz/login.go',
                headers:{
                    'Content-type': 'application/x-www-form-urlencoded'
                },
                data:data
            }).then((res)=>{
                console.log(res,333)
                if(res.data.status==0){
                    this.$message.success("登录成功")  
                    this.jumphome();
                }
                else{
                    this.$message.error("用户名或密码错误")

                }
            });
        },

 下图是发送参数的格式,是不是和第一种一样呢(推荐)

 

前后台的配合不可缺少,所有后台的配置,请参考这篇:https://segmentfault.com/a/1190000011811117

 

  • 2
    点赞
  • 13
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:终极编程指南 设计师:CSDN官方博客 返回首页
评论

打赏作者

侧耳倾听...

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值