HTTP POST 提交数据的四种方式详解

作者：橙子时间：2026-10-30 20:58:02浏览：506

本文详细解析 HTTP 协议中 POST 请求的四种数据提交方式：application/x-www-form-urlencoded、multipart/form-data、application/json 以及 text/xml。同时对比 GET 请求的特点，结合具体请求头与响应体示例，说明各方式的适用场景及优缺点，帮助开发者根据实际需求选择合适的数据交互格式。

HTTP 协议中 POST 提交数据的四种方式详解

撰写本文的初衷源于过往客户端开发经验。在许多公司的后端接口设计中，POST 提交方式被作为统一标准。

服务端通常返回 JSON 格式的字符串，以便于统一管理和处理。起初对 POST 机制了解不深时，并未察觉其中的差异。

然而，当独立开发技术社区 www.helloworld.net 时，涉及文件上传和表单提交等功能，

才意识到若缺乏相关知识，在实际应用中会耗费大量时间，造成开发阻碍。

借此机会复习并深入学习 GET 与 POST 这两种最常用的数据提交方式。

HTTP 提交方式有哪些？

HTTP 协议定义了 9 种请求方法，具体包括：

序号	方法	描述
1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	允许客户端查看服务器的性能。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。

其中，最常用的方法是 GET 和 POST。

HTTP 消息的组成部分

HTTP 是一种通信协议，所谓通信协议，即指双方沟通的规则。

例如，若我说 A，你知道我饿了想吃东西，接着我说 A 米饭，你就明白我饿了且想吃米饭。

由此可见，协议即双方预先约定好的沟通格式。

HTTP 通信协议正是 HTTP客户端 与 HTTP服务端 双方共同规定的数据格式。

那么，HTTP 消息具体由哪些部分组成呢？

答案很简单，HTTP 消息包含两个主要部分：

请求头（Request Headers）
请求体（Request Body）

例如，在浏览器中访问 www.helloworld.net 并回车，此时发送的是 GET 请求。

其请求头示例如下：

GET / HTTP/2
Host: www.helloworld.net
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Cookie: Hm_lvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379; Hm_lpvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379
Upgrade-Insecure-Requests: 1
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
If-None-Match: "d696-1nnZwKI6/LZalqvEzQx9IFil/tw"
TE: trailers

需要注意的是，HTTP 的 GET 请求不包含请求体，这也是许多公司统一封装接口为 POST 而非 GET 的原因之一。

因为 POST 请求包含请求体，可以携带大量数据；而 GET 请求因无请求体，参数只能附加在 URL 中，数据承载量有限。

GET 请求方法

GET 是最常用且最简单的请求方法，其语义即为获取文件。

因此，GET 请求用于获取服务器上的特定资源，使用时只需记住以下两点：

GET 传参必须将参数附加在 URL 末尾，例如 http://www.helloworld.net?name=tom&age=23。

服务器接收到请求后，即可解析 URL 末尾的参数，如 name = tom，age = 23。

此外，鲜有人提及的一点是，GET 请求确实没有请求体。

接下来重点介绍 POST 请求。

POST 请求方法

POST 意为提交，若需向服务器发送数据，可使用 POST 方法。

尽管协议规定 POST 用于提交数据，但许多公司并未严格遵循此规范。

查询操作也可能使用 POST，这只是一个术语，服务端收到请求后，无论是查询、删除还是提交资源，

均取决于前后端团队的约定。

下面探讨 POST 提交数据的几种具体方式。

第一种：application/x-www-form-urlencoded

这是 POST 的默认提交方式，对应的请求头中 Content-Type 值为 application/x-www-form-urlencoded。

以抓取 www.helloworld.net 上的几个请求为例，展示如下：

## 请求头
POST /v1/special/getSpecialCateList HTTP/2
Host: tiger-api.helloworld.net
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/x-www-form-urlencoded
Authorization: 
token: 
ts: 1668407094
sign: d41d8cd98f00b204e9800998ecf8427e
deviceType: pc
Origin: https://www.helloworld.net
Connection: keep-alive
Referer: https://www.helloworld.net/
Cookie: Hm_lvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379; Hm_lpvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406398
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
Content-Length: 0
## 请求体
action=10&pageNum=1&pageSize=10&uuid=15139897

此方式通常用于提交键值对（key, value）形式的数据。

第二种：multipart/form-data

此前我曾将其与上述方式混淆，直到编写文件上传功能时才查阅确认，两者并不相同。

该提交方式多用于文件上传，通常用于客户端向服务端传输大文件数据，如图片或文件。

首先解释其编码方式：系统会生成一个较长的 boundary 字符串作为分界线，标识后续均为表单内容；紧接着跟随表单中第一个键值对的名称，随后换行并跟随其值。之后再生成一个 boundary 字符串分界线，用于分割不同的键值对。后续操作重复上述流程，详细流程见下方示例。

同样以 www.helloworld.net 为例，我们抓取其中一个接口进行观察：

# 请求头
POST http://www.helloworld.net/xyz HTTP/1.1
Host: www.helloworld.net
User-Agent: python-requests/2.24.0
Accept-Encoding: gzip, deflate
Accept: */*
Content-Type: multipart/form-data; boundary=e42346452as650adf2345fadade
Content-Length: 222
Connection: keep-alive
# 请求体
--e42346452as650adf2345fadade
Content-Disposition: form-data; name="field0"
value1
--e42346452as650adf2345fadade
Content-Disposition: form-data; name="field1"
value2
--e42346452as650adf2345fadade--
Content-Disposition: form-data; name="field2"; filename="filename"
Content-Type: text/plain
--e42346452as650adf2345fadade--

从上述示例可知，请求头中的 Content-Type 包含一个 boundary=e42346452as650adf2345fadade。

boundary 后的字符串为随机生成，用于在请求体中对数据进行分段。

其作用即为分隔符。

第三种：application/json

这是目前应用最广泛且便捷的方式。

在请求头中设置 content-type=application/json，即表明请求体内容格式为 JSON。

同理，服务端在响应时，也会在响应头中添加一个 content-type=application/json。

此举旨在告知客户端，响应体内容的格式同样为 JSON。

参照 www.helloworld.net 中的一个请求，示例如下：

## 请求头
POST /v1/special/getSpecialList HTTP/2
Host: tiger-api.helloworld.net
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Content-Type: application/json
Authorization: 
token: 
ts: 1668408188
sign: 08fab32346193fa92037b5ca5f9ed592
deviceType: pc
Content-Length: 30
Origin: https://www.helloworld.net
Connection: keep-alive
Referer: https://www.helloworld.net/
Cookie: Hm_lvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668406379,1668408042,1668408051; Hm_lpvt_c7e77fd22dddf4a169b8d6f4807c5a4c=1668408051
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
TE: trailers
## 请求体
action=10&amp;pageNum=1&amp;sortType=0

观察其响应体内容：

{
  "code": 1,
  "data": {
    "hasMore": false,
    "list": [
      {
        "uuid": "5441523000",
        "title": "区块链原理和应用",
        "totalCount": 0,
        "chapterCount": 1,
        "readCount": 0,
        "subscribeCount": 1,
        "createTime": "0001-01-01T00:00:00Z",
        "status": 0,
        "profile": "1037883613",
        "nicker": "小天",
        "avatar": "https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/d04d513fbea19f6cb7c3b4beee3c7f5e.jfif",
        "subscribed": false
      },
      {
        "uuid": "bbatgp",
        "title": "C语言编程（初级）",
        "totalCount": 0,
        "chapterCount": 19,
        "readCount": 2938,
        "subscribeCount": 1,
        "createTime": "0001-01-01T00:00:00Z",
        "status": 0,
        "profile": "80662724",
        "nicker": "Suzhou",
        "avatar": "https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/d04d513fbea19f6cb7c3b4beee3c7f5e.jfif",
        "subscribed": false
      }
    ]
  },
  "message": "获取数据成功",
  "errMessage": ""
}

第四种：text/xml

此方式较为少见，鲜有使用。

其特点是请求消息的请求体内容为纯文本格式的 XML。

此处不再赘述。

感兴趣者可自行查阅相关资料。

综上所述，对 HTTP 的 POST 四种方法及 GET 简介总结如下：

GET 请求仅能在 URL 中携带参数；虽然所有方法均可在请求头中携带参数，但这不属于 GET 方法的特有属性。
GET 请求不包含请求体。

POST 提交数据共有四种方式，具体如下：

1. `application/x-www-form-urlencoded`，此为默认方式，主要提交键值对形式的数据。

2. `multipart/form-data`，此方式用于客户端向服务端提交大数据，常用于文件上传等场景。

注意此方式会在请求头中生成 boundary 字段，其值为随机生成的字符串，用于分隔请求体中的数据。

application/json 此种方式应用最多且最常用，但在开发 www.helloworld.net 过程中，较少使用此方式。

原因在于该方式在服务端解析时需创建大量结构体或类，因此最终选择了第一种提交方式。

text/xml 这种方式使用较少，请求体内容为 XML 格式。

简要介绍了 HTTP 的 GET 与 POST 相关知识，希望对读者有所帮助。

这也作为个人笔记，以防遗忘，便于日后查询。

以上就是前端技巧之 HTTP 中 POST 提交数据四种方式的详细内容，更多关于前端 HTTP POST 提交数据的资料请关注本站其它相关文章！

作者最新文章

JS脚本在App中运行报错怎么解决

2026-11-04 23:11:03

JS怎么使用padStart方法给数字补零

2026-11-04 11:12:03

JS是什么意思？JavaScript全称及基本定义

2026-11-04 08:05:29

JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项

2026-11-03 18:34:57

JS字符串转整数：parseInt与Number的区别及用法

2026-11-03 17:26:54