jQuery AJAX load() method

jQuery load() method

The jQuery load() method is a simple but powerful AJAX method.

The load() method loads data from the server and puts the returned data into the selected element.

Syntax:

$("}}selector).load(URL,data,callback);

Required URL The parameter specifies the URL you want to load.

Optional data The parameter specifies the collection of query string key/value pairs sent with the request.

Optional callback The parameter is the name of the function to be executed after the load() method is completed.

This is the content of the 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 the specified <div> element:

Example

$("#div1").load("demo_test.txt");

Try it yourself

You can also add jQuery selectors to the URL parameters.

The following example loads the content of the element with id="p1" in the file "demo_test.txt" into the specified <div> element:

Example

$("#div1").load("demo_test.txt #p1");

Try it yourself

The optional callback parameter specifies the callback function to be allowed after the load() method is completed. The callback function can set different parameters:

  • responseTxt - Contains the result content when the call is successful
  • statusTXT - Contains the call status
  • xhr - Contains XMLHttpRequest object

The following example displays a prompt after the load() method is completed. If the load() method is successful, it displays "External content loaded successfully!", and if it fails, it displays an error message:

Example

$("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);
  );
);

Try it yourself

jQuery AJAX Reference Manual

For a complete reference of AJAX methods, please visit our jQuery AJAX Reference Manual.