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

I have an old web application I have to support (which I did not write).

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

When I fill out a form and submit then check the "Network" tab in Chrome I see "Request Payload" where I would normally see "Form Data". What is the difference between the two and when would one be sent instead of the other?

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

Googled this, but didn't really find any info explaining this (just people trying to get javascript apps to send "Form Data" instead of "Request Payload".

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

2 个解决方案

#1

206

The Request Payload - or to be more precise: payload body of a HTTP Request - is the data normally send by a POST or PUT Request. It's the part after the headers and the CRLF of a HTTP Request.

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

A request with Content-Type: application/json may look like this:

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

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

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

If you submit this per AJAX the browser simply shows you what it is submitting as payload body. That’s all it can do because it has no idea where the data is coming from.

如果您按照AJAX提交此内容，浏览器只会向您显示它作为有效负载正文提交的内容。这就是它所能做的一切，因为它不知道数据来自何处。

If you submit a HTML-Form with method="POST" and Content-Type: application/x-www-form-urlencoded or Content-Type: multipart/form-data your request may look like this:

如果您使用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

In this case the form-data is the request payload. Here the Browser knows more: it knows that bar is the value of the input-field foo of the submitted form. And that’s what it is showing to you.

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

So, they differ in the Content-Type but not in the way data is submitted. In both cases the data is in the message-body. And Chrome distinguishes how the data is presented to you in the Developer Tools.

因此，它们的内容类型不同，但数据的提交方式不同。在这两种情况下，数据都在消息体中。 Chrome会在开发人员工具中区分数据的呈现方式。

#2

In Chrome, request with 'Content-Type:application/json' shows as Request PayedLoad and sends data as json object.

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

But request with 'Content-Type:application/x-www-form-urlencoded' shows Form Data and sends data as Key:Value Pair, so if you have array of object in one key it flats that key's value:

但是使用'Content-Type：application / x-www-form-urlencoded'的请求会显示表单数据并将数据作为键：值对发送，因此如果您在一个键中有对象数组，则会将该键的值展开：

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

sends

发送

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

#1

206