What is the difference between form data and request payload?
ajax, javascript, jquery
Solution
you have not provided enough information how you use the send function, but I assume that you do not set mime type to specify you are sending form data
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
the data sent are in this case encoded as you encode a query string
xhr.send("name=foo&value=bar");
otherwise it will not be interpreted as form data by Developer Tools.
jquery does majority of work for you in this regard.
Update: To answer explicitly what is the difference...
if a request (typically POST) has `Content-type` header set to `application/x-www-form-urlencoded` the body is expected to be in the form of a standard querystring with url-encoded key`=`value pairs joined by `&`. Form data section then shows the key-value parameters (when viewed parsed). This way was much more common in past because it is a default for HTML forms.
other cases are shown in Request payload section (and nowadays parsed for readability as well for common formats like JSON).
Problem
When I send an AJAX Post request and send parameters in queryString in send() method, Chrome Developer Tool's XHR capture tool shows the parameters under request payload. and when I use jquery's post function, The tool shows parameters under Form Data section. What is the difference ?