Details on the use of Get/Post parameters in Jquery and AngularJS

Passing parameters is not difficult, but sometimes it can be troublesome when it involves, for example, passing an object or form to the backend. Here are some usage methods. Now let us take a look at this angularjs article

First of all, we will introduce several attributes that we often confuse when sending requests:
dataType: Expect the data format returned by the server
mimeType: Tell how to process the data format returned by the server, so that the browser will process it accordingly, for example, set the type to " Text/html", then the client will know that this is an HTML document, and I can just present it directly; if it is "Application/pdf", then the client will know that it needs to start the PDF reader plug-in. Present content.
contentType: refers to the data type you want to send. For example, "application/json;charset=utf-8" is a very common type, and "application/x-www-form-urlencoded; charset=UTF-8" is the default type.

In addition, compare the difference between Request Payload and Form:
Request Payload needs to set Content-Type: application/json
In the chrome developer tool you You will see that it is passing an Object/json, and notice that it also contains an array. If you submit the request through ajax, the browser will only display the content you submitted through the Payload body. The browser does not know where the data comes from. Where does it come from

Form form needs to set Content-Type: application/x-www-form-urlencoded or Content-Type: multipart/form-data , what you see through the developer tool is like this. In this case, form-data is the Request payload. The browser knows what key corresponds to what value, so it is displayed in the form of xx=xx. It should be noted that the array is Converted into a string.

Therefore, when the data you need to transfer is only key-value pairs, using Form is enough. If you need to transfer a complex structure (such as an embedded set of arrays, objects), it is more appropriate to use RequestPayload. (If you want to see more, go to the PHP Chinese website angularjs Learning Manual to learn)

Next, let us compare various parameter passing situations~

In one case, pass an ordinary string
JQuery:

let params = {
    a: 1,
    b: 2
}
// 第一种方法:
$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request?" + $.param(params)
})

//第二种方法:
$.ajax({
        "type": "GET",
        "url": "your_request",
        "data": params
})

AngularJS:

var conf = {
    method: 'GET',
    url: 'your_request',
    params: {
        a: 1,
        b: 2
    }
};

$http(conf).then(function(response){
    console.log(response.data);
}, function(){
    console.log("error");
}).finally(function(){
    console.log("finally");
});

The second case: Post form data
JQuery :

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": params
})

AngularJS:
Note that data needs to be converted into a URL-encoded string
ContentType needs to be set to 'application/x-www-form-urlencoded' to specify that the transmitted data format is Form

var conf = {
    method: 'POST',
    url: 'your_request',
    data: $.param({
        c: 3,
        d: 4
    }),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
};

Third case: Use RequestPayload for Post parameters
JQuery:
Set contentType to "application/json" and serialize params

let params = {
    a: 1,
    b: 2,
    ary1: [3,4,5]
}

$.ajax({
    "type": "POST",
    "url": "your_request",
    "data": JSON.stringify(params),
    "contentType": "application/json"
})

AngularJS:

var conf = {
    method: 'POST',
    url: 'your_request',
    data: {
        c: 3,
        d: 4
    }
};

Sometimes, when the response returned by the server is null, an xml parsing error will occur in Firefox. This is because Firefox uses xml to parse the server return value by default, and when a null return value is encountered, an xml parsing error occurs. A parsing error occurred.
It can be solved by setting mimeType in JQuery

$.ajax({
        "dataType": 'json',
        "type": "GET",
        "url": "your_request",
        "mimeType": "json"
})

It is more difficult to set mimeType in AngularJS

This article ends here (if you want to see more, go here PHP Chinese websiteangularjs learning manual), if you have any questions, you can leave a message below

The above is the detailed content of Details on the use of Get/Post parameters in Jquery and AngularJS. For more information, please follow other related articles on the PHP Chinese website!