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

Question

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

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

谷歌搜索了这一点，但没有找到任何解释这一点的信息（只是人们试图让javascript应用程序发送“表单数据”而不是“请求负载”）。

Answer 1

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

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

Answer 2

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

但带有“Content-Type:application/x-www-form-urlencoded”的请求显示表单数据，并以Key:Value对的形式发送数据，因此，如果一个键中有一个对象数组，那么它将平铺该键的值：

{ 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

请求有效负载——或者更准确地说：HTTP请求的有效负载主体

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

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

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

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

如果您按照AJAX提交，那么浏览器将简单地向您显示它作为有效负载主体提交的内容。这就是它所能做的，因为它不知道数据来自哪里。

如果您提交的HTML表单包含method=“POST”和内容类型：application/x-www-Form-urlencoded或内容类型：多部分/表单数据您的请求可能如下所示：

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

foo=bar&name=John

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

因此，它们在内容类型上有所不同，但在提交数据的方式上没有差异。在这两种情况下，数据都在消息体中。Chrome区分了数据在开发者工具中的呈现方式。