Detailed explanation of the usage of $.get, $.post, $.getJSON and $.ajax in jQuery

The focus of this chapter is to talk about the four methods of calling ajax in jQuery: $.get, $.post, $getJSON, $ajax.

When we are "happy" to write ajax programs in javascript, suddenly someone tells you that there is a thing called jquery, which will tell you how happy it is not to directly interact with HttpRequest, and at the same time, you will no longer You no longer need to worry about the garbled ajax code problem. What's even better is that your js code will be greatly simplified. After reading this article, you will find that ajax is simply a matter of one sentence.

1. $.get

The $.get() method uses the GET method to make asynchronous requests. Its syntax structure is:

$.get( url [, data] [, callback] );

Explain the various parameters of this function:

url: string type, the address of the ajax request.

data: Optional parameter, object type. The key/value data sent to the server will be appended to the request URL as QueryString.

callback: optional parameter, function type, this function is automatically called when ajax returns successfully.

Finally write an example of $.get() for your reference:

$.get(
    "submit.aspx",{
        id:     '123',
        name:   '青藤园',
    },function(data,state){
        //这里显示从服务器返回的数据
        alert(data);
        //这里显示返回的状态
        alert(state);
    }
)

2. $.post()

$.post() method uses POST method to make asynchronous requests. Its syntax structure is:

$.post(url,[data],[callback],[type]);

This method is similar to $.get(), except that there is an additional type parameter, then Here we only introduce the type parameter. For other information, please refer to $.get() above.

type: type is the requested data type, which can be html, xml, json, etc. If we set this parameter to: json, then the returned format will be in json format. If not set, it will be the same as The format returned by $.get() is the same, both are strings.

Finally write an example of $.post() for your reference:

$.post(
    "submit.aspx",{
        id:     '123',
        name:   '青藤园',
    },function(data,state){
        //这里显示从服务器返回的数据
        alert(data);
        //这里显示返回的状态
        alert(state);
    },
    "json"
)

3. $.getJSON()

$. getJSON() is specially set up for ajax to obtain json data, and supports cross-domain calls. Its syntax format is:

getJSON(url,[data],[callback]);

url: string type, sending request address data: optional parameter, to be Send Key/value parameters, same as get and post type data callback: Optional parameter, callback function when loading is successful, same as get and post type callback

JSON is an ideal data transmission format. It can be well integrated with JavaScript or other host languages, and can be used directly by JS. Using JSON is more structurally reasonable and safer than sending "nude" data directly through GET and POST. As for jQuery's getJSON() function, it is just a simplified version of the ajax() function with JSON parameters set. This function can also be used across domains and has certain advantages over get() and post(). In addition, this function can let the program execute the callback function X by writing the request url in the format of "myurl?callback=X".

4. $.ajax()

$.ajax() is a common ajax package in jquery. Its syntax format is:

$.ajax(options);

The options is an object type, which specifies the specific parameters of this ajax call. Here I attach the most commonly used parameters

$.ajax({
        url: 'submit.aspx',
        datatype: "json",
        type: 'post',
        success: function (e) {   //成功后回调
            alert(e); 
        },
        error: function(e){    //失败后回调
            alert(e);
        },
        beforeSend: function(){  /发送请求前调用，可以放一些"正在加载"之类额话
            alert("正在加载");
        }
})

The above is how jquery implements ajax calls. Method, ajax calling is quite complicated. I hope this chapter can be helpful to everyone. For more related tutorials, please visit jQuery Video Tutorial, AJAX Video Tutorial!