jQuery Ajax Load
In this tutorial you will learn how to load data from server using jQuery.
jQuery load() 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. The basic syntax of this method can be given with:
The parameters of the load() method has the following meaning:
- The required URL parameter specifies the URL of the file you want 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 complete parameter is basically a callback function that is executed when the request completes. The callback is fired once for each selected element.
Let's put this method into real use. Create a blank HTML file "test-content.html" and save it somewhere in your web server. Now place the following HTML code inside of this file:
Example
Try this code »<h1>Simple Ajax Demo</h1>
<p id="hint">This is a simple example of Ajax loading.</p>
<p><img src="sky.jpg" alt="Cloudy Sky"></p>Now, create one more HTML file say "load-demo.html", and save it at the same location where you've saved the previous file. Now put the following HTML code inside of it:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").load("test-content.html");
});
});
</script>
</head>
<body>
<div id="box">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Load Content</button>
</body>
</html>Finally, open this page in your browser and click the "Load Content" button. You'll see the content of DIV box is replaced by the HTML content of the "test-content.html" file.
Tip: To test this Ajax example you need to place the HTML files on a web server. You can set up a local web server on your PC by installing WampServer or XAMPP. You must open the demo file using "http://" since Ajax makes HTTP requests.
Note: Ajax request can be made only to the files that exist on the same web server that servers the page from which the Ajax request is sent, not to external or remote servers for security reasons. This is called same-origin policy.
Further, the callback function can have three different parameters: responseTxt which contains the resulting content if the call succeeds, statusTxt wchich contains the status of the call, and the jqXHR whcich contains the XMLHttpRequest object.
Further, the callback function can have three different parameters:
responseTxt— Contains the resulting content if the request succeeds.statusTxt— Contains the status of the request such as success or error.jqXHR— Contains the XMLHttpRequest object.
Here's the modified version of the previous example that will display either the success or error message to the user depending on the status of the request.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").load("test-content.html", function(responseTxt, statusTxt, jqXHR){
if(statusTxt == "success"){
alert("New content loaded successfully!");
}
if(statusTxt == "error"){
alert("Error: " + jqXHR.status + " " + jqXHR.statusText);
}
});
});
});
</script>
</head>
<body>
<div id="box">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Load Content</button>
</body>
</html>Loading Page Fragments
The jQuery load() also allows us to fetch only a portion of the document. This is simply achieved by appending the url parameter with a space followed by a jQuery selector, let's check out the following example to make it more clear.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery load() Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").load("test-content.html #hint");
});
});
</script>
</head>
<body>
<div id="box">
<h2>Click button to load new content inside DIV box</h2>
</div>
<button type="button">Load Content</button>
</body>
</html>The jQuery selector #hint within the url parameter (line no-10), specify the portion of the "test-content.html" file to be inserted inside the DIV box, which is an element that has the ID attribute with a value hint i.e. id="hint", see the first example.
