在 Chrome 开发工具网络选项卡中看到的“请求有效负载”与“表单数据”有啥区别

Posted 2023-02-22

【中文标题】在 Chrome 开发工具网络选项卡中看到的“请求有效负载”与“表单数据”有啥区别

【英文标题】：What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab在 Chrome 开发工具网络选项卡中看到的“请求有效负载”与“表单数据”有什么区别

【发布时间】：2014-05-31 20:17:58

【问题描述】：

我有一个需要支持的旧 Web 应用程序（不是我写的）。

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

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

【问题讨论】：

***.com/questions/10494574的可能重复

What is the difference between form data and request payload?的可能重复

还是不明白这两者有什么区别。 “Request Payload”只是一个没有用类型编码的请求吗？

How can I post data as form data instead of a request payload?的可能重复

【参考方案1】：

请求负载 - 或者更准确地说：payload body of a HTTP Request

是通常由POST or PUT Request 发送的数据。 它是标题和HTTP Request 的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 表单，您的请求可能如下所示：

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

foo=bar&name=John

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

因此，它们在Content-Type 上有所不同，但在提交数据的方式上却不同。在这两种情况下，数据都在消息体中。 Chrome 会区分数据在开发者工具中呈现给您的方式。

【讨论】：

在大小等方面是否有理由偏爱另一种。特别是对于轻量级 AJAX 调用？

@buffer 对不起，我不明白你的问题。

如果我要发送 AJAX 调用，我可以将 content-type 设置为 json 或 x-www-form-urlencoded。前者将数据作为请求负载发送，而后者将其编码为 url 查询。两者似乎都工作正常。有理由偏爱其中之一吗？我看到 Twitter、Google、Facebook、*** 等大多数网站都将内容类型设置为 x-www-form-urlencoded。有什么具体原因吗？

这实际上与 OP 无关，但可能与 this answer helps.

我的浏览器将请求有效负载作为单个字符串（无对）“*abc123”发送，内容类型为 Application/Json;charset=UTF-8 - 但您的所有示例都显示密钥对。这如何有效？

【参考方案2】：

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

但是带有 'Content-Type:application/x-www-form-urlencoded' 的请求会显示表单数据并将数据发送为 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]

【讨论】：

php 当然是邪恶的。 application/x-www-form-urlencoded 的流行度是由 PHP 的流行度来定义的。

投了反对票，因为没有“json对象”之类的东西。发送的 json 数据作为纯字符串发送，因为 json 本质上是一个字符串。您当然可以使用 json_encode 将其转换为标准“对象”，但这也不能使其成为“json 对象”。

好的，我认为 javascript json 模板对象或者只是 javascript 对象更好

只要“json”或者如果你想强调类型“json string”就可以了。

解析时称为“对象文字”。当它被“字符串化”（转换为字符串）时，它被称为 JSON（JavaScript 对象表示法）格式。但是 JavaScript 对象的正确名称是“Object Literal”

【参考方案3】：

tl;lefloh 博士的（优秀）答案：

如果 HTTP 请求具有消息正文，则它是“请求有效负载” “表单数据”是请求负载的

子集

，其中正文编码为key1=value1&key2=value2 只要 Google Chrome 能够将表单数据与通用请求负载区分开来，它就会自定义格式