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

2 回答

• 215

  请求有效负载 - 或者更确切地说：payload body of a HTTP Request - 是通常由POST or PUT Request发送的数据 . 它是 Headers 之后的部分和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会在开发人员工具中区分数据的呈现方式 .

  回复于 2024-05-11T23:02:06+08:00
• 10

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

  但'Content-Type:application/x-www-form-urlencoded'请求显示表单数据并将数据发送为 Key:Value Pair ，因此如果您在一个键 it flats 中有对象数组，那么该键的值为：

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

  发送

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

  回复于 2024-05-11T23:02:06+08:00