276

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

red888
  • 18,164
  • 26
  • 123
  • 237
  • Possible duplicate of http://stackoverflow.com/questions/10494574 – lefloh Apr 16 '14 at 19:20
  • possible duplicate of [What is the difference between form data and request payload?](http://stackoverflow.com/questions/10494574/what-is-the-difference-between-form-data-and-request-payload) – SilverlightFox Apr 17 '14 at 10:04
  • 2
    Still don't get what the difference between the two is. Is "Request Payload" just a request that wasn't encoded with a type? – red888 Apr 17 '14 at 13:05
  • Possible duplicate of [How can I post data as form data instead of a request payload?](https://stackoverflow.com/questions/11442632/how-can-i-post-data-as-form-data-instead-of-a-request-payload) – shanechiu Jul 09 '19 at 03:45

3 Answers3

304

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.

Community
  • 1
  • 1
lefloh
  • 9,828
  • 3
  • 24
  • 46
  • 5
    Is there a reason to prefer one over the other in terms of size etc.. Specifically for lightweight AJAX calls? – user Aug 08 '14 at 14:10
  • @buffer sorry, I don't understand your question. – lefloh Aug 08 '14 at 17:58
  • 4
    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? – user Aug 08 '14 at 19:06
  • 2
    This is not really related to the OP but maybe [this answer helps](http://stackoverflow.com/a/13457437). – lefloh Aug 08 '14 at 20:01
14

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]
}
Mohammadreza
  • 2,913
  • 8
  • 31
  • 51
  • PHP is evil of course. The popularity of application/x-www-form-urlencoded is defined by the popularity of PHP. – Brian Cannard Apr 28 '16 at 10:17
  • 6
    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. – Volkan Ulukut Dec 07 '16 at 11:32
  • Ok,I think javascript json template object or just javascript object is better – Mohammadreza Dec 07 '16 at 17:37
  • 1
    Just "json" or if you want to emphasize type "json string" would be fine. – Volkan Ulukut Dec 16 '16 at 12:42
  • 2
    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" – beliha Jul 19 '20 at 20:46
0

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
Dave Fort
  • 2,246
  • 1
  • 10
  • 7