POST数据时的几种格式

发表于： 更新于：
字数：1226 阅读：≈ 3分钟 浏览：

POST 数据时的几种格式

‍

POST 数据时，通过 Content-Type 来指定数据格式。

关于 Content-Type：

在请求时：通过指定 Content-Type 来告诉服务器发送的数据类型

在响应时：服务器通过 Content-Type 告知浏览器返回的数据的格式

POST 数据时常见的 Content-Type

  1. application/x-www-form-urlencoded

    它是 HTML 中表单提交时的默认类型。（当然，也可通过表单的 enctype 属性指定其他类型），也是 jQuery 和 Zepto 库默认的 POST 格式。

    它提交的数据主体会被编码成键值对的形式，即：key1=value1&key2=value2&key3=value3

    例子：

    <form action="https://httpbin.org/anything" method="post">
  <p>用户名：<input type="text" name="username"></p>
  <p>邮箱：<input type="text" name="email"></p>
  <p>密码：<input type="password" name="password"></p>
  <button type="submit">提交</button>
</form>

    如上 HTML 代码，点击提交按钮，查看 POST 的请求头，会发现：Content-Type 为 application/x-www-form-urlencoded

    此外，请求有效主体载荷(payload)的特殊字符会使用 URLEncode 编码：

    username=user+name&email=example%40email.com&password=password

    比如，上面实例中的 空格 被编码为 + 号，邮箱的 @ 符号被编码为 %40。

    {: id="20230206010832-znzlu6p" updated="20230206010832"}

  • multipart/form-data

    multipart/form-data 也是很常见的 Content-Type 类型，一般用于提交文件、非 ASNI 数据、二进制数据。当我们在使用表单上传文件时，必须设置表单的 enctype 属性为 multipart/form-data。

    在上面的表单基础上，新增了一个上传头像的 input 元素。

    <form action="https://httpbin.org/anything" method="post" enctype="multipart/form-data">
  <p>用户名：<input type="text" name="username"></p>
  <p>邮箱：<input type="text" name="email"></p>
  <p>密码：<input type="password" name="password"></p>
  <p>上传头像：<input type="file" name="avatar"></p>
  <button type="submit">提交</button>
</form>

    请求有效载荷(payload)为

    -----------------------------162929654918621149224132436261
Content-Disposition: form-data; name="username"

user name
-----------------------------162929654918621149224132436261
Content-Disposition: form-data; name="email"

example@email.com
-----------------------------162929654918621149224132436261
Content-Disposition: form-data; name="password"

password
-----------------------------162929654918621149224132436261
Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"
Content-Type: image/jpeg

ÿØÿà//后面的数据省略

    multipart/form-data 数据包括多个部分,每一个部分使用一串 boundary 进行分隔，下一行是 Content-Disposition 消息头，它的值固定为 form-data，后面是附加参数（name 或 filename）。

    隔一个空行后就是消息主体。

    {: updated="20230206010842" id="20230206010842-cumde27"}
    {: id="20230206010843-9qz9rz1" updated="20230206010843"}