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

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

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

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

请求有效负载-或更准确地说：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提交此内容，则浏览器仅向您显示它作为有效内容正文提交的内容。这就是它能做的所有事情，因为它不知道数据来自何处。

如果您提交的HTML表单带有 method="POST"和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可以区分在开发人员工具中如何将数据呈现给您。

在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]
}