post请求四种数据格式，前端对应传参方式总结

前言

HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：

<method> <request-URL> <version>
<headers>

<entity-body>

协议规定 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 version="1.0"?--> 
<methodcall> 
    <methodname>examples.getStateName</methodname> 
    <params> 
        <param> 
            <value><i4>41</i4></value> 
         
    </params> 
</methodcall> 

XML-RPC 协议简单、功能够用，各种语言的实现都有，但是个人觉得略显臃肿，没有Json格式简单灵活

总结

平时开发中有时候会出现参数格式错误一定要注意查看Content-Type设定值，以及跟后端沟通