目录
二,application/x-www-form-urlencoded
post提交数据常见的的两种编码方式有:application/json 和 application/x-www-form-urlencoded
一,application/json
axios默认提交就是使用这种格式。如果使用这种编码方式,那么传递到后台的将是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较
首先是application/json: (默认)
接着是application/x-www-form-urlencoded:
这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的,而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。
二,application/x-www-form-urlencoded
这应该是最常见的post编码方式,一般的表单提交默认以此方式提交,大部分服务器语言对这种方式都有很好的支持。
Axios传参的两种方式:表单数据和json字符串(Form Data和Request Payload)
由于axios默认使用application/json格式来提交数据的(传递到后台的是序列化后的json字符串),但是我想用application/x-www-form-urlencoded来提交数据(将数据以FormData形式提交给后台),简单点说,就是想把传递的json数据转为form data,此时有两种方式:(1)设置transformRequest
(2)用qs框架
(
注意:
在使用vue以及axios的过程中,通常
需要将数据以表单形式(即FormData)提交给后台)
(1)设置transformRequest
axios 请求配置中,transformRequest
配置允许在向服务器发送前,修改请求数据。
在axios post请求部分加入红框内的代码!
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
// 'Content-Type': 'application/json;charset=utf-8'
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
最后在header查看的时候,便是成功了,如下
(2)用qs框架
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。
首先要安装qs,在项目中使用命令行工具输入:
npm i qs
安装完成后在需要用到的组件中:在main.js中进行导入qs,交给vue进行使用
import qs from 'qs'
Vue.prototype.$qs = qs;//我后面在用this.$qs调用全局qs时失败了,没有调用成功,不知道为什么。所以每次我在使用qs时,都是用的在当前vue页面添加import qs from 'qs'这种方式
关于qs有两种方法:qs.parse()和qs.stringify()
这两种方法虽然都是序列化,但是还是有区别的。
qs.stringify()是将对象 序列化成URL的形式,多个对象之间用&拼接(拼接是由底层处理,无需手动操作)
qs.parse()是将URL解析成对象的形式,或者说,
将序列化的内容拆分成一个个单一的对象
- 在发送请求前将数据用qs模块转化
- 修改请求头的Content-Type='application/x-www-form-urlencoded’
或者
this.$axios.post("/user",this.$qs.stringify(data)).then((response) => {
console.log(response)
});
例:
运行结果:
参考: