在 Chrome 开发工具网络选项卡中看到的“请求有效负载”与“表单数据”之间有什么区别

请求有效负载 - 或更准确地说：payload body of a HTTP Request

是通常由 POST 或 PUT 请求发送的数据。它是 HTTP 请求的标头和 CRLF 之后的部分。

带有 Content-Type: application/json 的请求可能如下所示：

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

如果您按 AJAX 提交此内容，浏览器只会向您显示它作为有效负载主体提交的内容。这就是它所能做的一切，因为它不知道数据来自哪里。

如果您提交带有 method="POST" 和 Content-Type: application/x-www-form-urlencoded 或 Content-Type: multipart/form-data 的 HTML 表单，您的请求可能如下所示：

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

在这种情况下，表单数据是请求有效负载。在这里浏览器知道的更多：它知道 bar 是提交表单的输入字段 foo 的值。这就是它向您展示的内容。

因此，它们在 Content-Type 上有所不同，但在提交数据的方式上没有区别。在这两种情况下，数据都在消息体中。 Chrome 会区分数据在开发者工具中呈现给您的方式。

---

在 Chrome 中，带有“Content-Type:application/json”的请求显示为 Request PayedLoad，并将数据作为 json 对象发送。

但是带有“Content-Type:application/x-www-form-urlencoded”的请求会显示表单数据并将数据作为键：值对发送，因此如果您在一个键中有对象数组，它将使该键的值变平：

{ Id: 1, 
name:'john', 
phones:[{title:'home',number:111111,...},
        {title:'office',number:22222,...}]
}

发送

{ Id: 1, 
name:'john', 
phones:[object object]
phones:[object object]
}

---

tl; lefloh 博士（优秀）的回答：

如果 HTTP 请求有消息体，则它是“请求有效负载”

“表单数据”是请求有效负载的子集，其中正文被编码为 key1=value1&key2=value2

每当 Google Chrome 可以将表单数据与通用请求有效负载区分开来时，它都会自定义格式

---