ChatGPT解决这个技术问题 Extra ChatGPT

What's the difference between "Request Payload" vs "Form Data" as seen in Chrome dev tools Network tab

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

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?

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".

Possible duplicate of stackoverflow.com/questions/10494574
Still don't get what the difference between the two is. Is "Request Payload" just a request that wasn't encoded with a type?

C
Community

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.

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

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.

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:

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.

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.


Is there a reason to prefer one over the other in terms of size etc.. Specifically for lightweight AJAX calls?
@buffer sorry, I don't understand your question.
If I'm sending an AJAX call, I can set content-type to either json or x-www-form-urlencoded. The former sends the data as request payload while the latter encodes it as url query. Both seem to work fine. Is there a reason to prefer one of them? I see most websites like Twitter, Google, Facebook, Stackoverflow set content type as x-www-form-urlencoded. Any specific reason?
This is not really related to the OP but maybe this answer helps.
My browser is sending Request Payload as just a single string (no pairs) "*abc123" with content type Application/Json;charset=UTF-8 - but all your examples show key pairs. How is this valid?
M
Mohammadreza

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

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:

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

sends

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

PHP is evil of course. The popularity of application/x-www-form-urlencoded is defined by the popularity of PHP.
downvoted because there is no such thing as a "json object". the json data sent is sent as a plain string because json is essentially a string. you can of course convert it into a standard "object" with json_encode but that doesn't make it a "json object" either.
Ok,I think javascript json template object or just javascript object is better
Just "json" or if you want to emphasize type "json string" would be fine.
It's called an "Object Literal", when it is parsed. When it is "stringified" (converted to a string) it's said to be in JSON (JavaScript Object Notation) format. But the proper name for a JavaScript Object is "Object Literal"
D
Dave Fort

tl;dr of lefloh's (excellent) answer:

If an HTTP request has a message body, it is a "Request Payload"

"Form Data" is a subset of Request Payload in which the body is encoded as key1=value1&key2=value2

Whenever Google Chrome can distinguish Form Data from a generic Request Payload, it customizes the formatting