前言
HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：
协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。 但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python ,java等，以及它们的 framework，都内置了自动解析常见数据格式的功能。服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。post提交数据有四种方式，下面介绍他们以及前端应该如何传参
一、Content-Type设置为application/x-www-form-urlencoded
传统的这种格式表单通过$(“form”).serialize()方法将参数序列化变成形如key&value的格式，然后传给后台解析现，如今serialize()在vue/angula/react等前端框架中都不怎么用了，如果要使用这种编码传输，可以使用npm的qs
1.使用qs
qs可以将json序列化如下：
let a = {
name:'june',
age:26
}
qs.stringify(a) //"name=june&age=26" qs可以将josn对象转换成形如key&value
如何使用：
import qs from 'qs'
let data = {code: 'fds', headImgUrl: '99', innerDemoVos: [{code: '篮球', name: 'xx'}, {code: '台球', name: '小芳'}]}
let params = qs.stringify(data, {arrayFormat: 'indices', allowDots: true})
// post的content-type的格式需要设置成application/x-www-form-urlencoded，data就是post请求体。
let data = {code: 'fds', headImgUrl: '99', innerDemoVos: [{code: '篮球', name: 'xx'}, {code: '台球', name: '小芳'}]};
// 将json对象转换成form表单的key&value的形式，包括复杂的数组对象，注意{arrayFormat: 'indices', allowDots: true}参数，一定要写，这个关系到数组对象转换成的格式后台是否可以解析，如果不写那么数组对象就是innerDemo[0].[code]: 篮球，这样后台是无法解析，只有innerDemo[0].code: 篮球的格式才可以解析，
console.info(qs.stringify(data, {arrayFormat: 'indices', allowDots: true}));
2.自定义全局方法
//utils->utils.js
export function objserialize (obj) {
let str = ''
for (var key in obj) {
str += key + '=' + obj[key] + '&'
}
return str.slice(0, -1)
}
//在组件中引入
import {objTostring} from "@/utils/utils"
let data = {
name: 'xiaoming',
age: 18,
}
let params = objTostring(data) //name='xiaoming'&age=18
二、Content-Type设置为application/json
这种编码格式现在比较流行推荐使用，前端传参不用管数据结构有多复杂层次有多深直接以json形式传就ok，不用像上面的转key&value的形式。实例
let param = {
name : 'xiaohong',
age: 18,
sex: '女',
goods: {
a: 1,
b:2
}
}
传参直接传json对象param，非常简单
三、Content-Type设置为 multipart/form-data
这也是常见的post请求方式，一般用来上传文件图片等，各大服务器的支持也比较好。
//在vue的js中
data(){
return{
params:{
file:"",//上传文件
}
}
}
methods:{
update(){
let fd = this.transformData(this.params)
let api = '/api/updateFile'
this.axios.post(api,fd,{
headers:{
"content-type":"multipart/form-data"
}
}）.then(res=>{
console.log(res)
})
},
// 转化为formdata格式
transformData(obj){
let fd = new FormData()
Object.keys(obj).forEach(key=>{
fd.append(key,obj[key])
})
return fd
}
}
四、Content-Type设置为 text/xml
它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的：
POST http://www.example.com HTTP/1.1
Content-Type: text/xml
XML-RPC 协议简单、功能够用，各种语言的实现都有，但是个人觉得略显臃肿，没有Json格式简单灵活
总结
平时开发中有时候会出现参数格式错误一定要注意查看Content-Type设定值，以及跟后端沟通