目录

一，application/json 

二，application/x-www-form-urlencoded 

（1）设置transformRequest

（2）用qs框架

---

 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) });

例：

运行结果：

 

参考：

https://blog.csdn.net/u013253924/article/details/81772820

https://blog.csdn.net/wupuyi/article/details/80269907