See the data format submitted by Vue Axios with POST

VUE Framework recommends using AXIOS to send AJAX requests. I have written a blog to explain how to use AXIOS in the VUE component. But I used to play with the GET request. Now I use the post method when I take my own blog, and the results found that the background (Node.js) could not get the parameters from the front desk. Later, I have entered a discovery and finally discovered the problem.

POST submitted four coding methods


This should be the most common POST encoding method, and the general form submission is submitted in this way by default. Most server languages ​​have good support to this way. In PHP, you can get the value of KEY in a way in the way, in Node, we can separate parameters using querystring middleware

 APP .POST ("/ Server", Function (Req, res) {Req.on ("DATA", Function (DATA) {letry = queryString.Pars (DATA)). Key; console.log ("QueryString: "+ key)});});   
2.Multipart / form-data

This is also one Compare common POST data formats, when we use your form to upload files, you must make the ENCTYPE attribute of the Form form or the ContentType parameter of the Ajax is equal to MULTIPART / FORM-DATA. Data sent to the background when using this coding format, as such,

Different fields begin with 详解vue axios用post提交的数据格式 – Boundary
, followed by the content description information, and finally the specific content of the field. If the file is transferred, it also contains file name and file type information

3.Application / JSON

AXIOS default submission is to use this format. If this coding method is used, it will be a serialized JSON string after passing to the background. We can compare the data sent by Application / JSON and Application / X-WWW-Form-Urlencoded

First is Application / JSON:

Next is Application / X-WWW-FORM-URLENCODED: 详解vue axios用post提交的数据格式

Hereinafter, Application / X-WWW can be apparent. -form-urlencoded Uploaded to the background of the background in the form of a key-value, and Application / JSON is directly a JSON string. If you are in processing the Application / JSON, you will have a problem with the way to deal with Application / X-WWW-FORM-URLENCoded. For example, the background node.js still uses the method to deal with Application / X-WWW-FORM-URLENCODED, then
QueryString.Parse (Data)

obtained is like this

详解vue axios用post提交的数据格式

This time queryString.Parse (DATA). Key Only Undefined

4.Text / XML 详解vue axios用post提交的数据格式

The remaining coding format is Text / XML, I have not used this format. After

Since we know that the AXIOS POST method uses Application / JSON format encoded data by default, then the solution has two, one is the background change reception parameters. The other, the other is to modify the encoding format of the AXIOS POST method to Application / X-WWW-FORM-URLENCODED, so it does not need to be modified in the background. First, the first solution

In the VUE component, the code of the AXIOS sends a POST request is as follows

this. $ AXIOS ({Method: “POST”, URL: “/ API / HAVEUSER”, DATA: {Name:, password: this.password}}}} => {Console.log ( )

At this time, the information in the console NetWork Headers is such a

  The reception data needs to be rely on  Body-Parser 
middleware, we are pre-installed, followed by body-parser

详解vue axios用post提交的数据格式 In this screenshot, the role is only
const bodyparser = Require (“body-parser”);

Next to use Body-Parser

(“/ API / Haveuser”, BodyParser.json (), Function (REQ, RES) {Console. LET HAVEUSER = Require (“../ API / Server / User.js”); Haveuser (Req.Body.Name, Req.Body.password, res);}); 详解vue axios用post提交的数据格式
At this time, after the current station sends a POST request, it will be printed in the background console

At this time, the corresponding value can be obtained by


 This method is relatively simple, nor does it require too much modification of the front desk, and it is recommended to use this method.   The second solution, the specific operation is as follows 

this. $ AXIOS ({Method: “POST “, URL:” / API / HAVEUSER “, Headers: {‘Content-Type’: ‘Application / X-WWW-FORM-URLENCODED’}, Data: {Name:, password: this.password} : [Function (DATA) {Let Ret = ‘FOR (Let IT IN DATA) {RET + =Encodeuricomponent (IT) + ‘=’ + Encodeuricomponent (DATA [IT]) + ‘&’} Return Ret}],}). The ((res. => {console.log (res. Data);})

详解vue axios用post提交的数据格式

Among them, the key role is Headers and TransformRequest. Where

Headers is the custom request header that is about to be sent. TransformRequest allows the request data to be modified before sending to the server. After this, the background queryString.Parse (Data)
is similar to

{name: ‘W’, Password: ‘W’}

. The background code is as follows

App.POST (“/ API / HAVEUSER”, FUNCTION (Req, Res) {let since = request (“../ API / Server / User .js “); Req.on (” DATA “, Function (DATA) {let name = queryString.Pars (Data). Name; let password = queryString.Pars (Data). Password; console. LOG (Name, Password, Res);};});

This method is obvious to be more troublesome,However, there is no need to do too much processing in the background. Therefore, the specific operation is determined according to the actual situation.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment