jQuery load() Method

jQuery load() method used to loads data from the server and place into the matched element.

Syntax

Here is a syntax for the load() method

$.load( URL, data, function(response, textStatus, jqXHR) );

Parameter	Type	Description
URL	String	Required. Specifies the URL of the file that you want to load.
data	Object String	Optional. Specifies the set of data (JSON formatted data) that you send to the server along with the request.
function(response, textStatus, jqXHR)	Function	Optional. Specifies callback function, it will executed when the request completes. Additional parameters response - contains the result data from the request textStatus - contains the status of the request jqXHR - contains the XMLHttpRequest object

Example

ajaxfile.txt

<p>Using Ajax, you can load document contains and place into selected element.</p>
<br>
<p>AJAX stands for <i>Asynchronous JavaScript and XML</i></p>

Here, in this example load() method call when click on button.

$(document).ready(function(){
  $("button").click(function(){
    $("div").load("ajaxfile.txt");
  });
});

Run it... »

Example: callback function

ajaxfile_load_params.html

<p>Using Ajax, you can load document contains and place into selected element.</p>
<br>
<p>AJAX stands for <i>Asynchronous JavaScript and XML</i></p>

$(document).ready(function(){
  $("button").click(function(){
    $("div").load("ajaxfile_load_params.html", function(response, status, xhr){
      if(status == "success"){
        alert("Success! File content loaded successfully!\nStatus: " + xhr.statusText);
      }
      if(status == "error"){
        alert("Error: " + xhr.status + " " + xhr.statusText);
      }
    });
  });
});

Run it... »