Question

我有一个旧的Web应用程序，我必须支持（我没有写）。

当我填写表单并提交然后检查Chrome中的“网络”标签时，我会看到“请求有效负载”，我通常会看到“表单数据”。两者之间有什么区别，何时会发送一个而不是另一个？

用Google搜索，但没有找到任何解释此信息的信息（只是有人试图让javascript应用程序发送“表单数据”而不是“请求有效负载”。

Answer 1

请求有效负载 - 或者更确切地说：payload body of a HTTP Request - 数据通常由POST or PUT Request发送。它是标题后面的部分和HTTP Request的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会在开发者工具中区分数据的呈现方式。

Answer 2

在Chrome中，请求＆＃39; Content-Type：application / json＆＃39; 显示为Request PayedLoad并将数据作为json对象发送。

但使用＆＃39;内容类型：application / x-www-form-urlencoded＆＃39; 的请求会显示表单数据，并将数据发送为键：值对，所以如果你在一个键中有一个对象数组，那就是那个键的值：

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

发送

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

Answer 3

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