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);

RequiredURLThe parameter specifies the URL you wish to load.

OptionaldataThe parameter specifies the set of query string key/value pairs to send with the request.

OptionalcallbackThe parameter is the name of the function to execute after the load() method completes.

This is the content of the sample file ("demo_test.txt"):

<h2>jQuery AJAX is a really great feature!</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 a jQuery selector to the URL parameter.

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 run when the load() method completes. The callback function can have different parameters:

  • responseTxt- Contains the result content when the call succeeds
  • statusTXT- Contains the status of the call
  • xhr- Contains the XMLHttpRequest object

The following example displays an alert box after the load() method completes. If the load() method succeeds, 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 »
Other extensions