jQuery load() method

jQuery AJAX Methods

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

The load() method is the simplest way to get data from the server. It is roughly equivalent to $ .get(url, data, callback), except that it is a method rather than a global function, and has an implicit callback function.

Request method:If thedataIf provided as an object, use the POST method. Otherwise, it is assumed to be GET.

Syntax:

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

Example

Load the content of the file ajax_intro.txt into the DIV element:

$("button").click(function(){
　　$("div").load("ajax_intro.txt");
});

Different from $ .get(), the load() method allows us to specify a part of the remote document to be inserted:

$("button").click(function(){
　　$("div").load("/jquery/ajax_load.html #table);
});

Load the page of ajax_post.php and send some other data:

$("button").click(function(){
　　let data = {fname: "Seagull", lname: "Anna"};
　　$("div").load("ajax_post.php", data);
});

Load the page of ajax_post.php, send some other data, and display the alert status message:

$("button").click(function(){
　　let data = {fname: "Seagull", lname: "Anna"};
　　$("div").load("ajax_post.php", data, function(response, status){
　　　　alert(status);
　　});
});

If the Ajax request encounters an error, display a notification:

$("button").click(function(){
　　let data = {fname: "Seagull", lname: "Anna"};
　　$("#success").load("wrong_file.php", data, function(response, status, xhr){
　　　　if(status == "error"){
　　　　　　let msg = "Sorry, an error occurred: ";
　　　　　　$("#error").html(msg　+　xhr.status　+　"　"　+　xhr.statusText);
　　　　}
　　});
});

Parameter Value

jQuery AJAX Methods