vue axios.post请求后端接收不到参数问题
程序员文章站
2024-01-20 21:09:16
...
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);
}
推荐阅读
-
vue axios.post请求后端接收不到参数问题
-
Axios发送POST请求报错,后端接收不到参数响应404
-
vue整合axios post请求后端接收不到参数
-
Vue.js + axios发post请求时后端接收不到参数解决办法
-
Vue的axios向后台发送POST请求接收不到参数
-
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
-
axios 发 post 请求,后端接收不到参数的解决方案
-
vue之axios封装post请求后端接收不到参数的问题
-
通过axios发送post请求发现springMVC接收不到参数问题(详细教程)
-
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法