AJAX is often used in front-end development to send asynchronous requests, with request data attached to POST type requests. The two common parameter transmission modes are Form Data and Request Payload.

A GET request

When a GET request is used, the parameters are concatenated after the request URL in the form of key=value. Such as:

http://m.baidu.com/address/getlist.html?limit=50&offset=0&t=1502345139870

Copy the code

However, limited by the length of the request URL, get requests are generally used when fewer parameters are required.

A POST request

When the number of parameters is large and data security is required, a POST request is used to transfer parameter data. The parameter data for the POST request is in the request body.

Method 1: Form Data

Set content-type in the header of a POST request: Application/X-www-form-urlencoded (default), parameters are submitted in the request body as standard form Data, concatenated with &, and the format of parameters is key= Value&key =value&key=value…

Front-end code Settings:

xhr.setRequestHeader('Content-type'.'application/x-www-form-urlencoded');
xhr.send('a=1&b=2&c=3');
Copy the code

In a servlet, the back end can get form parameters in the form of Request.getParameter (name).

Method 2: Request Payload

If you use AJAX native POST requests, set the Request header to Content-type :application/json. The Request parameters are displayed in the Request Payload format. {“key”:”value”,”key”:”value”… }, which is much more readable.

The backend can be retrieved using the getRequestPayload method.

Form Data is different from Request Payload

  1. If the request header is set to content-type: Application /x-www-form-urlencoded, then the request is considered as a form request, and the parameters appear in form Data in the format of key= Value&key =value&key=value…

  2. Set content-type :application/json in the native AJAX request header, or use the default request header content-type :text/plain; The parameters are presented in the Request Payload block.

Reference Documents:

www.cnblogs.com/btgyoyo/p/6…

Xiaobaoqiu. Making. IO/blog / 2014/0…