vue axios.post请求后端接收不到参数问题
2019-05-22 15:08
761 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42701692/article/details/90444379
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请求后端接收不到的问题
- vue2.0 axios发送post请求,后端参数获取不到的解决方式
- axios 发 post 请求,后端接收不到参数的详细解决方案
- axios发送post请求,springMVC接收不到数据问题
- vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题
- axios发送post请求springMVC接收不到参数
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
- axios的post请求发送数据,后端接收不到
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
- 解决SpringMVC接收不到axios发送post请求的数据问题
- Vue 使用axios 发送post请求,参数格式有错误问题
- axios发送post请求springMVC接收不到参数的解决方法
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
- java使用axios.js的post请求后台时无法接收到参数的问题
- tomcat配置maxPostSize处理请求参数太大导致后端获取不到参数问题
- ajax的post请求后台request.getParameter()接收不到参数问题
- axios发送post请求,springMVC接收不到数据问题
- vue 添加axios组件,解决post传参数为null问题
- 解决SpringMVC接收不到ajaxPOST参数的问题