jQuery load() Method
The jQuery load() method loads data from the server and place the returned HTML into the selected element. This method provides a simple way to load data asynchronous from a web server.
The jQuery load()
method is a simple, but powerful AJAX method.
The load()
method loads data from a
server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
The optional callback parameter is the name of a function to be executed
after the load()
method is completed.
Here is the content of our example file: "demo_test.txt":
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
The following example loads the content of the file "demo_test.txt" into a
specific <div>
element:
$("#div1").load("demo_test.txt #p1");
The optional callback parameter specifies a callback function to run when the
load()
method is completed. The callback function can have different parameters:
responseTxt
- contains the resulting content if the call succeedsstatusTxt
- contains the status of the callxhr
- contains the XMLHttpRequest object
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});