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

HTTP Content-Type详解

最新推荐文章于 2025-07-17 16:47:05 发布

转载最新推荐文章于 2025-07-17 16:47:05 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c6bb5e451882561ad328e9e

文章标签：

#json #javascript #php #ViewUI

本文深入解析了HTTP请求中Content-Type的三种主要类型：application/x-www-form-urlencoded、multipart/form-data及application/json，阐述了它们在不同场景下的应用，如表单提交、文件上传及JSON数据传输，并提供了具体的代码示例。

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

转载于:https://juejin.im/post/5c6bb5e451882561ad328e9e