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...   »