This example describes the use of the load () method of Ajax in jquery. Share to everyone for your reference. The specific analysis is as follows:
This function is a simple and powerful Ajax method in jquery.
It can load content from the server and then write a matching element.
Syntax Structure:
Copy Code code as follows:
$ (selector). Load (url,data,callback);
Parameter resolution:
1.selector: A selector that loads content into the element that the selector matches.
2.URL: Must be loaded with a URL address.
3.data: Optional, a collection of query string key/value pairs sent with the request.
4.callback: Optionally, the function to be executed after the load () function completes is also a callback function.
Code instance:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#bt"). Click (function () {
$ ("#thediv"). Load ("Mytest/demo/antzone.txt");
})
})
</script>
<body>
<div id= "Thediv" ></div>
<input type= "button" value= "View Effect" id= "BT"/>
</body>
The code above implements our requirements to write the contents of a text file into a DIV element.
Callback callback function:
The callback function can have three parameters, and the following describes the function of the three parameters:
1.RESPONSETXT: Contains the result content when the call succeeds.
2.statusTXT: Contains the state of the call.
3.xhr:xmlhttprequest object.
Code instance:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </title>
<script type= "Text/javascript" src= "Mytest/jquery/jquery-1.8.3.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#bt"). Click (function () {
$ ("#thediv"). Load ("Antzone.txt", function (RESPONSETXT,STATUSTXT,XHR) {
if (statustxt== "success") {
Alert ("Content loaded successfully!") ");
}
if (statustxt== "error") {
Alert ("Error:" +xhr.status+ ":" +xhr.statustext);
}
});
});
})
</script>
<body>
<div id= "Thediv" ></div>
<input type= "button" value= "View Effect" id= "BT"/>
</body>
The above code implementation can eject the error prompt because the path is incorrect and the file cannot be found.
I hope this article will help you with your jquery programming.