在Chrome开发工具“networking”选项卡中看到的“请求有效内容”与“表单数据”有什么区别

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

当我填写表格并提交，然后检查Chrome中的“networking”选项卡时，我会看到“请求有效内容”，我通常会看到“表单数据”。 两者之间有什么区别，什么时候发送而不是另一个呢？

谷歌search这个，但没有真正find任何信息解释（只是人们试图让JavaScript应用程序发送“表格数据”，而不是“请求有效载荷”。

Answer 1

请求负载 – 或者更准确地说： HTTP请求的负载主体 – 是通常由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是提交表单的input字段foo的值。 这就是它向你展示的。

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

Answer 2

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

但是'Content-Type：application / x-www-form-urlencoded'的请求会显示表单数据并以Key：Value Pair的forms发送数据，所以如果您在一个键中有对象数组， 它将平分该键的值：

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

发送

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