HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The jQuery load() method is a simple, but powerful AJAX method
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.
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.
The following example loads the content of the file "demo_test.txt" into a
specific <div>
element:
$("#div1").load("demo_test.txt");
It is also possible to add a jQuery selector to the URL parameter.
The following example loads the content of the element with id="p1", inside
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 objectThe following example displays an alert box after the load() method
completes. If the load()
method has succeeded, it displays "External content
loaded successfully!", and if it fails it displays an error message:
$("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);
});
});
For a complete overview of all jQuery AJAX methods, please go to our jQuery AJAX Reference.