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

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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