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