vue axios.post请求后端接收不到参数问题

1、出现的问题

最新做的一个新项目,使用了vue框架,ajax使用的则是vue官网推荐的axios,因为是第一次使用,用的时候axios发送数据时遇到后端接收不到数据的情况。

问题代码截图:
在这里插入图片描述
问题代码浏览器请求截图:
在这里插入图片描述

2、解决问题

因为当请求头Content-Type为text/plain;charset=UTF-8,请求参数在RequestPayload中,所以Tomcat后台没有接收到
所以需要设置请求头Content-Type为application/x-www-form-urlencoded (post请求时当Content-Type为application/x-www-form-urlencoded,参数是在Form Data请求体中)

具体区别查看:HTTP请求中的form data和request payload的区别

经过尝试知道是因为请求头的问题,但是因为axios是从promise库中剥离出来的,axios没有jquery里ajax那么好用,axios发送的参数需要进行转换,因为没有使用脚手架开发项目,所以无法使用npm库里的qs.stringify,但是写了一个方法弥补。

成功展示图
在这里插入图片描述

以下是代码

//axios
axios({
	method: "post",
	url: host + '/xpg/baoxian/getSpbxList',
	data: urlstringify({
		"fl": title.trim(),
		"page": 1,
 		"size": 10
	}),
	headers: {
		"Content-Type": 'application/x-www-form-urlencoded'
	}
})
.then(function (response) {

}
.catch(function (error) {
	console.log(error);
});

//转义方法
function urlstringify(obj) {//字符串序列化
    var str = '';
    for (let key in obj) {
        if (Object.prototype.toString.call(obj[key]) === '[object Array]' || obj[key].constructor === Object) {
            //数组,对象
            for (var arrKey in obj[key]) {
                if (Object.prototype.toString.call(obj[key][arrKey]) === '[object Array]' || obj[key][arrKey].constructor === Object) {
                    //数组,对象
                    for (var arrarrKey in obj[key][arrKey]) {
                        str += '&' + key + '[' + arrKey + '][' + arrarrKey + ']=' + obj[key][arrKey][arrarrKey];
                    }
                } else {
                    //普通
                    str += '&' + key + '[' + arrKey + ']=' + obj[key][arrKey];
                }
            }
        } else {
            //普通
            str += '&' + key + '=' + obj[key];
        }
    }
    return str.substring(1);
}

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值