THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery - AJAX load() Method


jQuery load() Method

The jQuery load() strategy is a straightforward, yet amazing AJAX method.

The load() strategy loads information from a server and puts the returned information into the chose element.

Syntax:

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

The required URL parameter indicates the URL you wish to load.

The discretionary information parameter indicates a lot of querystring key/esteem sets to send alongside the request.

The discretionary callback parameter is the name of a capacity to be executed after the heap() technique is completed.

Here is the substance of our model document: "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some content in a paragraph.</p>

The following model loads the substance of the document "demo_test.txt" into a explicit <div> element:

Example

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

It is additionally conceivable to add a jQuery selector to the URL parameter.

The following precedent loads the substance of the component with id="p1", inside the document "demo_test.txt", into a particular <div> element:

Example

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

The discretionary callback parameter determines a callback capacity to run when the load() technique is finished. The callback capacity can have diverse parameters:

  • responseTxt - contains the subsequent substance if the call succeeds
  • statusTxt - contains the status of the call
  • xhr - contains the XMLHttpRequest object

The following model shows an alarm box after the heap() technique finishes. On the off chance that the heap() technique has succeeded, it shows "External content stacked successfully!", and in the event that it comes up short it shows a blunder message:

Example

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content stacked successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});