The difference between form data and request payload

Enctype Properties for HTML <form> tags

In the following example, the form data is sent without encoding:

<form action= "form_action.asp" enctype= "Text/plain" > <p>first name: <input type= "text" name= "fname"/ ></p> <p>last Name: <input type= "text" name= "lname"/></p> <input type= "Submit" value= "Su Bmit "/></form>

Definition and usage

The Enctype property specifies how the form data should be encoded before it is sent to the server.

By default, the form data is encoded as "application/x-www-form-urlencoded". That is, all characters are encoded before being sent to the server (spaces are converted to "+" plus signs, and special symbols are converted to ASCII HEX values).

Enctype value and Meaning:

Application/x-www-form-urlencoded encode all characters before sending (default)

Multipart/form-data characters are not encoded. You must use this value when you use a form that contains a file upload control.

The Text/plain space is converted to the "+" plus sign, but does not encode special characters.

In the HTTP request, if it is a GET request, then the form parameter is appended to the URL in the form of name=value&name1=value1, and if it is a POST request, then the form parameter is in the request body, also in the name=value&name1= The form of value1 in the request body. The Chrome developer tool can be seen as follows (here is a readable form, not a request format for the real HTTP request protocol):

GET Request:

Requesturl:http://127.0.0.1:8080/test/test.do?name=mikan&address=street
Request Method:get
Status code:200 OK

Request Headers
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-encoding:gzip,deflate,sdch
accept-language:zh-cn,zh;q=0.8,en;q=0.6
alexatoolbar-alx_ns_ph:alexatoolbar/alxg-3.2
Connection:keep-alive
cookie:jsessionid=74ac93f9f572980b6fc10474cd8edd8d
host:127.0.0.1:8080
referer:http://127.0.0.1:8080/test/index.jsp
user-agent:mozilla/5.0 (Windows NT 6.1) applewebkit/537.36 (khtml, like Gecko) chrome/33.0.1750.149 safari/537.36

Query String Parameters
Name:mikan
Address:street

Response Headers
Content-length:2
Date:sun, 10:42:38 GMT
server:apache-coyote/1.1

POST request:

Requesturl:http://127.0.0.1:8080/test/test.do
Request Method:post
Status code:200 OK

Request Headers
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-encoding:gzip,deflate,sdch
accept-language:zh-cn,zh;q=0.8,en;q=0.6
alexatoolbar-alx_ns_ph:alexatoolbar/alxg-3.2
Cache-control:max-age=0
Connection:keep-alive
Content-length:25
content-type:application/x-www-form-urlencoded
cookie:jsessionid=74ac93f9f572980b6fc10474cd8edd8d
host:127.0.0.1:8080
origin:http://127.0.0.1:8080
referer:http://127.0.0.1:8080/test/index.jsp
user-agent:mozilla/5.0 (Windows NT 6.1) applewebkit/537.36 (khtml, like Gecko) chrome/33.0.1750.149 safari/537.36

Form Data
Name:mikan
Address:street

Response Headers
Content-length:2
Date:sun, 11:05:33 GMT
server:apache-coyote/1.1

Note here that the content-type of the POST request is application/x-www-form-urlencoded, and the parameter is in the request body, which is the form Data in the request above.

And if you use the native Ajax POST request:

Requesturl:http://127.0.0.1:8080/test/test.do
Request Method:post
Status code:200 OK

Request Headers
accept:*/*
Accept-encoding:gzip,deflate,sdch
accept-language:zh-cn,zh;q=0.8,en;q=0.6
alexatoolbar-alx_ns_ph:alexatoolbar/alxg-3.2
Connection:keep-alive
Content-length:28
Content-type:text/plain;charset=utf-8
Cookie:jsessionid=c40c7823648e952e7c6f7d2e687a0a89
host:127.0.0.1:8080
origin:http://127.0.0.1:8080
referer:http://127.0.0.1:8080/test/index.jsp
user-agent:mozilla/5.0 (Windows NT 6.1) applewebkit/537.36 (khtml, like Gecko) chrome/33.0.1750.149 safari/537.36

Request Payload
Name=mikan&address=street

Response Headers
Content-length:2
Date:sun, 11:49:23 GMT
server:apache-coyote/1.1

Note The requested Content-type is Text/plain;charset=utf-8, and the request form parameter is in Requestpayload.

When an HTTP post form requests a commit, the content-type used is application/x-www-form-urlencoded, and the POST request that uses the native AJAX does not specify the request header Requestheader, The default content-type used is text/plain;charset=utf-8.

Therefore, when using the native Ajax POST request, you need to explicitly set the request Header, which is:

Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");

Why does the server do special processing of form submission and file upload because the form submission data is a name value pair, and Content-type is application/x-www-form-urlencoded, and the file upload server needs special handling, The normal POST request (Content-type is not application/x-www-form-urlencoded) data format is not fixed, not necessarily the way of the name value pair, so the server can not know the specific processing method, Therefore, parsing can only be done by acquiring the original data stream.

jquery sets Content-type to application/x-www-form-urlencoded when executing a POST request, so the server can parse correctly, and when using native AJAX requests, If the settings are not displayed Content-type, then the default is Text/plain, then the server does not know how to parse the data, so only by acquiring the original data stream to parse the request data.

Reference: <a title=http://blog.csdn.net/mhmyqn/article/details/25561535 href= "http://blog.csdn.net/mhmyqn/article/ details/25561535 ">http://blog.csdn.net/mhmyqn/article/details/25561535

<a title=http://www.w3school.com.cn/tags/att_form_enctype.asp href= "http://www.w3school.com.cn/tags/att_form_ Enctype.asp ">http://www.w3school.com.cn/tags/att_form_enctype.asp

The difference between form data and request payload