Ajax asynchronous requests and ajax asynchronous requests

Ajax asynchronous requests and ajax asynchronous requests

My friends who are working on front-end development are very impressed with ajax asynchronous updates. As a beginner, today I will share with you about ajax asynchronous requests. Since ajax is indispensable for jQuery knowledge, we recommend that you visit www.w3school.com to learn more. The tutorials are complete and suitable for beginners to get started quickly.

JQuery references can be imported by downloading the js file or by using external Import

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

After importing jQuery, we can start ajax asynchronous update of request data.

1. Useload()The method loads data from the server through an Ajax request and places the returned data in the specified element. The Calling format is as follows:load(url,[data],[callback])The url of the parameter is the address of the loading server. The data parameter can be set to the data sent during the request. The callback parameter is the callback function executed after the data request is successful.

$(function(){    $("#btn").click(function(){        $("ul").html("
2. UsegetJSON()You can use Ajax asynchronous requests to obtain data from the server and parse the obtained data. The call format is as follows:jQuery.getJSON(url,[data],[callback])Or$.getJSON(url,[data],[callback])Here, the url parameter is the server address for loading the json format file. The data parameter is the data sent during the request, and the callback parameter is the callback function executed after the data request is successful.
$(function(){    $("#btn").click(function(){        $.getJson("www.manyiaby.com", function(data){            $.each(data, function(index, sport){                if(index==3)                    alert(sport["name"]);            })        });    });});    
3. UsegetScript()The method asynchronously requests and executes JavaScript files in the server. The Calling format is as follows:jQuery.getScript(url,[callback])Or$.getScript(url,[callback])The parameter url is the server request address. The callback parameter is the callback function executed after the request is successful.
$ (Function () {$ ("# btn "). click (function () {$. getScript ("www.manyiaby.com", function () {alert ("Operation completed ");});});});
4. Useget()Method, the GET method is used to request data to the server, and the request data is returned through the callback function parameters in the method. The Calling format is as follows:$.get(url,[callback])The parameter url is the server request address. The callback parameter is the callback function executed after the request is successful.
$(function(){    $("#btn").click(function(){        $.get("www.manyiaby.com", function(data){            alert(data.name);        }, "json");    });}); 
5.get()Method,post()Most of the methods are used to send data to the server in POST mode. After the server receives the data, it processes the data and returns the processing result to the page. The Calling format is as follows:$.post(url,[data],[callback])The parameter url is the server request address. The optional data is the data sent when a request is sent to the server. The optional callback parameter is the callback function executed after the request is successful.
$ (Function () {$ ("# btn "). click (function () {$. post ("www.manyiaby.com", {name: "manyi net", url: "www.manyiaby.com"}, function (data) {alert (data );});});});
6. Useserialize()The method can serialize the element values with the name attribute in the form to generate a standard URL encoded text string that can be directly used for ajax requests. The Calling format is as follows:$(selector).serialize()The selector parameter is the element or form element in one or more forms.
$(function(){    $("#btn").click(function(){        alert($("form").serialize());    });}); 
7. Useajax()The method is the underlying and most powerful method to request server data. It can not only obtain the data returned by the server, but also send requests to the server and transmit numerical values. Its call format is as follows:jQuery.ajax([settings])Or$.ajax([settings])The parameter settings is the configuration object for sending an ajax request. In this object, the url indicates the Server Request Path, data indicates the data passed during the request, and dataType indicates the data type returned by the server, success is the callback function for successful request execution. type is the method for sending data requests. The default value is get.
$ (Function () {$ ("# btn "). click (function () {$. ajax ({url: "www.manyiaby.com", dataType: "text", data: {name: "manyi net", url: "wwww.manyiaby.com"}, success: function (data) {alert (data );}});});});
8. UseajaxSetup()You can set the global options of the Ajax request. After the configuration is complete, the following Ajax requests do not need to add these options. The call format is as follows:jQuery.ajaxSetup([options])Or$.ajaxSetup([options])The option options parameter is an object that sets the global option value for Ajax requests.
$ (Function () {$. ajaxSetup ({dataType: "text", success: function (data) {alert (data) ;}}); $ ("# btn "). bind ("click", function () {$. ajax ({data: {name: "manyi net", url: "www.manyiaby.com"}, url: "www.manyiaby.com "});})});});
9,ajaxStart()AndajaxStop()The method is to bind an Ajax event. The ajaxStart () method is used to trigger a function before an Ajax request is sent. The ajaxStop () method is used to trigger a function after the Ajax request is complete. Their call format is:$(selector).ajaxStart(function())And$(selector).ajaxStop(function())The brackets in the two methods are the bound functions. They are executed before an Ajax request is sent.ajaxStart()Method binding function. After the request is successful, run the ajaxStop () method binding function.
$ (Function () {$. ajaxStart (function () {alert ("requesting data... ") ;}); $. ajaxStop (function () {alert ("Data Request completed! ") ;}); $ (" # Btn "). bind ("click", function () {$. ajax ({url: "www.manyiaby.com", dataType: "json", success: function (data) {alert ("name:" + data. name );}});})});
10. Define a json object to save student-related information. Use the $. each () tool function to obtain the names and content of each element in the array and display it on the page.
<! DOCTYPE html> 
Now I have finished talking about the use of ajax. If any error occurs, I hope you can give me some advice.