The difference between query string, formdata and request payload

In the development of front end and back-end separation projects , There must be front and rear end joint commissioning . At this time, there will be many problems . Such as ： Whether the front end can find the back end ; Whether the front end uses the correct request method ; Whether the front end transmits the correct data to the back end ; Whether the back end responds to the front end with correct data, etc . If none of the above is a problem , Congratulations ！ That's great ！
There is always a gap between reality and ideal . The data transmitted from the current end to the back end is correct , But the back end is stunned and can't get it ？ Oh , Oh my god . How could this happen ？

Why? ？
because , The data format of the front and back ends is different . namely ： The data format transmitted from the front end to the back end does not match the way the back end receives data . The following mainly talks about the front end , namely ： Only pay attention to the data format at the time of request .
1、 The address bar transmits data
1）、query string Parameters：
When the request mode is get when , The browser will use the query string to transfer data , namely ：query string Parameters
Rules for querying strings ： The request parameter uses URL Address and “ Question mark and reference “ The way to deliver ---- Put a question mark on it url Separate from request parameters .
The format of the request parameter ： In the form of key value pairs , Use... Between multiple key value pairs & separate .
hypothesis ： Request address is newsList.php. The request parameter is pageIndex and pageCount.
that , The format of the request is ：newsList.php?pageIndex=1&pageCount=10;
Here's the picture , The request method is get, stay chrome Browser's network What you see in the picture is ：query string Parameters
2、 Data is transmitted in the request body
When the request mode is not get（ Most of the time post or put） when , So the requested data is not in url On , It's in the request body . The English of request is ：request payload. however chrome Browsers are designed for different content-type There is a distinction , Namely formData and request payload.
1）、formData
content-type The value of is " application/x-www-form-urlencoded" perhaps multipart/form-data; boundary=----WebKitFormBoundaryBoMA1XQDUpwpxKQg when , that , It's using formData Transfer data in the same format


2）、request payload
content-type The value of is " text/plain" perhaps "application/json" when , that , It's using request payload Transfer data in the same format


attach ： Default data format ：
1、 Conventional ajax When you ask ,Content-Type The default is " Text " type .
2、 Conventional form At the time of submission ,Content-Type The default is "Form" type （ application/x-www-form-urlencoded ）
3、axios When passing strings ,Content-Type The default is "Form" type （ application/x-www-form-urlencoded ）
4、axios When passing objects ,Content-Type The default is "JSON" type （（ application/json）

* Lu Rongtao front-end learning exchange Q Group 858752519
Add group notes ：CSDN recommend