Chrome开发人员工具“网络”标签中显示的“请求有效载荷”与“表单数据”之间有什么区别

Question

我有一个必须支持的旧Web应用程序（我没有写过）。当我填写表格并提交后，然后在Chrome中检查“网络”标签，我会看到“请求有效载荷”，而我通常会在其中看到“表格数据”。两者之间有什么区别？何时发送而不是发送？在Google上进行了搜索，但是并没有真正找到任何解释此信息的信息（只是人们试图让javascript应用程序发送“表格数据”而不是“请求有效载荷”。

Answer 1

请求有效载荷-或更准确地说：HTTP请求的有效载荷主体 -是通常由POST或PUT请求发送的数据。它CRLF是HTTP Request的标头和之后的部分。

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

POST /some-path HTTP/1.1

Content-Type: application/json

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

如果您按照AJAX提交此文件，则浏览器仅向您显示它作为有效内容正文提交的内容。这就是它能做的所有事情，因为它不知道数据来自何处。

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

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浏览器中，带有“ Content-Type：application / json”的请求显示为Request PayedLoad，并以json对象发送数据。

但是带有“ Content-Type：application / x-www-form-urlencoded”的请求 显示Form Data并以Key：Value Pair的形式发送数据，因此，如果您在一个键中包含对象数组，则它将该键的值展平：

{ Id: 1, 

name:'john', 

phones:[{title:'home',number:111111,...},

        {title:'office',number:22222,...}]

}

发送

{ Id: 1, 

name:'john', 

phones:[object object]

phones:[object object]

}