Jquery encapsulates some ajax request methods, which are very practical.
For example
. AjaxComplete () -- when the request is complete
. AjaxError () -- when the request fails
. AjaxSend () -- append a function to execute the Ajax request.
. AjaxStart () -- when the request starts,
. AjaxStop () -- end of request
. AjaxSuccess () -- when the request is successful
. Load () -- load data from the server and replace the returned HTML with the selected element.
JQuery. post () -- use http post requests to load server data
. Serialize () -- encode the form element set into a string for submission
. SerializeArray () -- encode the form Element Set into an array of key-value pairs
JQuery. param () -- creates a serialized array or object that is applicable to a URL query string or Ajax request.
JQuery. getScript () -- load a js file from the server and execute it
JQuery. getJSON () -- load JSON-encoded data from the server
JQuery. get () -- load data from the server. In short, there are two points.
I.. ajaxStart () and. ajaxStop ()
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script type = "text/javascript" src = "test/jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Log1'). ajaxStart (function (){
$ (This). text ('triggered ajaxStart handler .');
});
$ ('. Log2'). ajaxStop (function (){
$ (This). text ('triggered ajaxStop handler .');
});
$ ('. Trigger'). click (function (){
Certificate ('.result'{.load('xixi.html ');
});
});
</Script>
</Head>
<Body>
<Div class = "trigger"> Trigger </div>
<Div class = "result"> </div>
<Div class = "log1"> </div>
<Div class = "log2"> </div>
</Body>
</Html>
In the code, classloads A xixi.html for the element of the result, and the content in this file is casual, as long as the file exists. The order of js execution methods is
First
Copy codeThe Code is as follows:
$ (This). text ('triggered ajaxStart handler .');
Then
The content in xixi.html is written to the element whose class is result.
Last
Copy codeThe Code is as follows:
$ (This). text ('triggered ajaxStop handler .');
Ii.. ajaxSend (),. ajaxComplete (),. ajaxSuccess (), and. ajaxError ()
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Script type = "text/javascript" src = "test/jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Log1'). ajaxStart (function (){
$ (This). text ('triggered ajaxStart handler. '); // [1]
});
$ ('. Log2'). ajaxStop (function (){
$ (This). text ('triggered ajaxStart handler. '); // [5]
});
$ ('. Result'). ajaxSend (function (){
$ (This). text ('triggered ajaxSend handler. '); // [2]
});
$ ('. Result'). ajaxComplete (function (){
$ (This). text ('triggered ajaxComplete handler. '); // [4]
});
$ ('. Result'). ajaxSuccess (function (){
$ (This). text ('triggered ajaxSuccess handler. '); // [3]
});
$ (". Result"). ajaxError (function (){
$ (This). text ("Triggered ajaxError handler .");
});
$ ('. Trigger'). click (function (){
Certificate ('.result'{.load('xixi.html ');
});
});
</Script>
</Head>
<Body>
<Div class = "trigger"> Trigger </div>
<Div class = "result"> </div>
<Div class = "log1"> </div>
<Div class = "log2"> </div>
</Body>
</Html>
In the above Code, the class still loads an html file for result.
The execution sequence code has been marked
If an error occurs during the request, such as the file does not exist, the method in. ajaxError () is executed instead of in. ajaxSuccess.
In the past, I was always confused about ajax. Now I have a comprehensive understanding. To sum up, I hope to learn it together. In addition, it is worth studying whether the request method is HTTP GET or HTTP POST.
Jquery introduces the use of ajax addresses