logo
jQuery - AJAX load() Method
The jQuery ajax load() method is a simple, but powerful AJAX method. The jQuery load() method loads data from the server and place the returned HTML into the selected element. This method provides a simple way to load data asynchronous from a web server.
Syntax

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

The parameters of the load() method has the following meaning:

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

The optional data parameter specifies a set of query string (i.e. key/value pairs) that is sent to the web server along with the request.

The optional callback parameter is the name of a function to be executed after the load() method is completed.

Now place the following HTML code inside of this file :

Load URL : my_load_file.html

<h2> This is Ajax Load() Method </h2>
<p id="load_file"> World best (Web Development) website...!</p>

Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax load() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#my_site").load("my_load_file.html");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<div id="my_site">
<h2>Ajax Methods</h2>
</div>
 
<button type="button" class="btn">Click Here!</button>
 
</body>
</html>
Output :

It is also possible to add a jQuery selector to the URL parameter.

The following example loads the content of the element with id="load_file", inside the file "my_load_file.html", into a specific <div> element :

Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax load() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
  $("#my_site").load("my_load_file.html #load_file");
    });
  });
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<div id="my_site">
<h2>Ajax load() Method</h2>
</div>
 
<button type="button" class="btn">Click Here!</button>
 
</body>
</html>
Output :

The callback function can have different parameters :

responseTxt : contains the resulting content if the call succeeds

statusTxt : Contains the status of the request such as success or error.

jqXHR : Contains the XMLHttpRequest object.

The following example displays an alert box after the load() method completes. If the load() method has succeeded, it displays "External content loaded successfully!", and if it fails it displays an error message:

Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax load() Method</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#my_site").load("my_load_file.html", function(responseTxt, statusTxt, xhr){
            if(statusTxt == "success")
                alert("External content loaded successfully!");
            if(statusTxt == "error")
                alert("Error: " + xhr.status + ": " + xhr.statusText);
        });
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<div id="my_site">
<h2>Ajax load() Method</h2>
</div>
 
<button type="button" class="btn">Click Here!</button>
 
</body>
</html>
Output :