在 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 应用程序发送“表单数据”而不是“请求有效负载”。

【问题讨论】：

stackoverflow.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?的可能重复

标签： forms http rest post google-chrome-devtools

【解决方案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、Stackoverflow 等大多数网站都将内容类型设置为 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 能够将表单数据与通用请求负载区分开来，它就会自定义格式

【讨论】：