在Chrome开发工具网络标签中可以看到"请求有效负载"与"表单数据"之间的区别

Question

我有一个旧的Web应用程序,我必须支持(我没有写).

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

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

Answer 1

请求有效负载 - 或者更确切地说:HTTP请求的有效负载主体 - 是通常由POST或PUT请求发送的数据.它的头和后面的部分CRLFA的HTTP请求.

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

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

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

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

如果您使用method="POST"和提交HTML表单,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会在开发者工具中区分数据的呈现方式.

Answer 2

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