vue的axios使用post时必须使用qs.stringify而get不用问题
更新时间：2023年01月19日 09:47:52 作者：超级大帅比
这篇文章主要介绍了vue的axios使用post时必须使用qs.stringify而get不用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
问题
vue里代码如下：
this.$http.post('/getMatterList.do',{"matterIds":"1,2,3"})
.then((res)=>{
console.log(res);
})
axios官方文档都这么示范的，仔细看下浏览器里发出去的请求
传送参数的形式不是form-data，而是Request Payload。
只要做两步设置就可以解决了
用Qs.stringify()将对象序列化成URL的形式，Qs是axios里面自带的，所以直接引入就可以了
设置请求头里的’Content-Type’为’application/x-www-form-urlencoded’
import Qs from 'qs'
var data = Qs.stringify({"matterIds":"1,2,3"});
this.$http.post('/getMatterList.do',data, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res)=>{
console.log(res)
})
改完之后再来看下，问题已经解决了
原因
HTTP请求中的get请求和post请求参数的存放位置是不一样的，get请求的参数以键值对的方式跟在url后面的，而post请求的参数是以键值对的方式在请求体里的
get请求
post请求
为何要设置请求头里的’Content-Type’
使用不同请求方式时，参数的传输方式是不一样的，但是服务端在取接口的请求参数时，用的方法其实却是一样的，都是使用request.getParameter(key)来获取，其实是因为tomcat在中间会对请求参数进行解析处理，处理完把解析出来的表单参数放在request parameter map中，所以后端就可以通过request.getParameter(key)来统一获取数据，而tomcat解析的时候是通过’contentType’来知道当前的请求是post请求，当’contentType’为"application/x-www-form-urlencoded",它才会去读取请求体数据。
为何要用Qs.stringify()将对象序列化成URL的形式：
post请求参数是以键值对的形式存在请求体里，用Qs.stringify()就是把传入的对象转换为键值对。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题,这篇文章主要给大家介绍了关于在vue2中使用weixin-js-sdk的详细步骤,需要的朋友可以参考下2024-07-07
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo2022-09-09
Vue.js与 ASP.NET Core 服务端渲染功能整合
本文通过案例给大家详细分析了ASP.NET Core 与 Vue.js 服务端渲染,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了vue过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了vue.js 实现点击div标签时改变样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue中的MVVM原理和实现方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了7个实用的Vue开发技巧文。中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面我们来一起学习一下吧2019-05-05
下面小编就为大家分享一篇vue2.0 自定义 饼状图 (Echarts)组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了Vue实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-04-04
这篇文章主要给大家介绍了关于element的表单组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
最新评论