ajax post数据发送类型Content-Type详解

application/x-www-form-urlencoded

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。例如 PHP 中，$_POST['title'] 能够获取到 title 的值，$_POST['sub'] 能够获得 sub 数组。

case 1: 表单自动提交

<form action="/formSubmit" method="POST">
  <input type="text" name="name" value="123">
  <input type="text" name="age" value="123">
  <button>提交</button>
</form>
复制代码

Form data : name=123&age=123

case 2: Jquery.ajax post类型的默认发送类型

Jquery.ajax({
  url: '/jquery-urlencoded',
  type: 'post',
  data: {
    a: 1, b: 2,
    c: { a: 1, b: 2 }
  },
  success: () => { },
  error: err => console.log(err)
})
复制代码

Form Data : a=1&b=2&c%5Ba%5D=1&c%5Bb%5D=2

case 3: 修改axios的默认请求头并转化数据格式

Axios({
  url: "/axios-urlencoded",
  method: "post",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded;charset:UTF-8"
  },
  data: qs.stringify({
    a: 1, b: 2,
    c: { a: 1, b: 2 }
  })
}).then(() => { })
复制代码

Form Data : a=1&b=2&c%5Ba%5D=1&c%5Bb%5D=2

在使用axios时，修改Content-Type（默认值application/json），而且用qs转化数据格式，也是由于后台语言更支持application/x-www-form-urlencoded类型，不然某些后台语言、框架会接收不到数据

multipart/form-data

case 1 : ajax post提交的数据为FormData对象时， Content-Type自动设置为multipart/form-data

const xhr = new XMLHttpRequest();
const fd = new FormData();

fd.append('name', 'liyang');
fd.append('avatar', this.$refs.image.files[0]);
xhr.open("POST", '/native-ajax-form-data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText); // handle response.
  }
};
xhr.send(fd)
复制代码

------WebKitFormBoundaryEUDwjVQS6V8tkel4
Content-Disposition: form-data; name="name"

liyang
------WebKitFormBoundaryEUDwjVQS6V8tkel4
Content-Disposition: form-data; name="avatar"; filename="upload.png"
Content-Type: image/png


------WebKitFormBoundaryEUDwjVQS6V8tkel4--
复制代码

case 2: form enctype属性设置为multipart/form-data时

<form action="/form-form-data" method="POST" enctype="multipart/form-data">
  <input type="text" name="name" value="">
  <input type="text" name="age" value="">
  <button>提交</button>
</form>
复制代码

------WebKitFormBoundarymbGh3Kll05jGm3Zt
Content-Disposition: form-data; name="name"

liyang
------WebKitFormBoundarymbGh3Kll05jGm3Zt
Content-Disposition: form-data; name="age"

13
------WebKitFormBoundarymbGh3Kll05jGm3Zt--
复制代码

application/json

用于提醒后台提交的是json字符串形式的数据。优势在于传输{a:[{a:[1,2,3]}]}这种复杂结构的数据，使用json形式要比键值对形式更直观更方便，后台接收到数据后，直接转化类型便可使用

case 1 : axios post默认格式

Axios.post('/axios', {
  a: 1, b: 2,
  c: { a: 1, b: 2 }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
复制代码

Request Payload : {"a":1,"b":2,"c":{"a":1,"b":2}}

case 2 : jquery设置Content-type，并转化数据为字符串

Jquery.ajax({
  url: '/jquery-application-json',
  type: 'post',
  processData: false,
  contentType: "application/json;charset=UTF-8",
  data: JSON.stringify({
    a: 1, b: 2,
    c: { a: 1, b: 2 }
  }),
  success: () => { },
  error: err => console.log(err)
})
复制代码

Request Payload : {"a":1,"b":2,"c":{"a":1,"b":2}}