What are the methods for the front end to request the back end data?

Time:2021-6-6

In the development project of front-end and back-end separation, there will be such and such problems when front-end and back-end joint debugging, especially in the program of fetching data. Sometimes the front-end to the back-end is clearly correct, but it is unable to get the correct data. Now Xiaoqian will explain the three common data transmission methods.

1. Address bar transfer data

  1)、query string Parameters:

  When the request method is get, the browser will use the query string method to transfer data, that is, query string parameters

  Query string rules: request parameters are passed by URL address and "question mark passing parameters" -- separate URL and request parameters by question mark.

  Format of request parameters: represented by key value pairs, separated by & between multiple key value pairs.

  Suppose: the request address is NewsList. PHP. The request parameters are PageIndex and pagecount. Then, the format of the request is: NewsList. PHP? PageIndex = 1 & pagecount = 10; As shown in the figure below, the request method is get. In the Chrome browser's network, you can see query string parameters

1

2. Data transmission in request body

  When the request method is not get (mostly post or put), the requested data is not on the URL, but in the request body. The English of the request body is: www.diuxie.comrequest  payload。 However, Chrome browser distinguishes different content types, namely formdata and request payload.

  1)、formData

  The value of content type is "application / x-www-form-urlencoded" or multipart / form data; When boundary = --- WebKit formboundaryboma1xqdupwpxkqg, the format of formdata is used to transfer data

2

3

2)、request payload

  When the value of content type is "text / plain" or "application / JSON", it is in the format of request payload [game]( http://www.diuxie.com )Transfer data

4

5

Attachment: default data format

  1. In traditional Ajax requests, content type defaults to "text" type.

  2. When a traditional form is submitted, the content type defaults to "form" (application / x-www-form-urlencoded)

  3. When Axios passes strings, the content type defaults to "form" (application / x-www-form-urlencoded)

  4. When Axios passes objects, the content type defaults to "JSON" type ((application / JSON)

  These are the three ways of front-end data transmission