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

我有一个旧的web应用程序，我必须支持(不是我写的)。

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

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

当前回答

请求有效载荷——或者更准确地说: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-Form，你的请求可能是这样的:

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

foo=bar&name=John

在本例中，表单数据就是请求有效负载。这里浏览器知道的更多:它知道bar是提交表单的输入字段foo的值。这就是它向你展示的。

因此，它们的不同之处在于内容类型，而不是数据提交的方式。在这两种情况下，数据都在消息体中。Chrome在开发者工具中区分了数据是如何呈现给你的。

其他回答

Tl; lefloh博士(非常棒)的回答:

如果一个HTTP请求有一个消息体，它就是一个“请求有效负载”。 “表单数据”是Request Payload的一个子集，其中主体被编码为key1=value1&key2=value2 每当谷歌Chrome可以区分表单数据从一般的请求有效负载，它自定义格式

在Chrome中，请求与'Content-Type:application/json'显示为request PayedLoad和发送数据json对象。

但是请求'Content-Type:application/x-www-form-urlencoded'显示表单数据，并将数据作为键值对发送，因此如果你在一个键中有对象数组，它会平键值:

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

发送

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