Home >> jquery >> jQuery Load

jQuery Load

In the jQuery load() method, a simple way to load data asynchronous from a web server is provided in the sense that specific data from the server is loaded and the returned HTML is placed into the selected element. The basic syntax of this method is given below:

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

Below is the meaning of the parameters of the above syntax:

The required URL parameter specifies the URL of the file that requires loading.
The optional data parameter specifies a set of query strings like the key/value pairs that are sent to the web server alongside the request.
The optional complete parameter is mainly a callback function that is fired once for each selected element and it is executed at the completion of the request.

Observe the following instructions to use the jQuery load() method:

Create a blank HTML file "test-content.html" and save it in a separate file on your web server.
Place the following HTML code inside the file.
Create one more HTML file ‘load-demo.html’, and save it at the same place the previous file is saved.
Input the following HTML code inside of it.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading Data from External File using Ajax in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/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>

Example 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading Data from External File using Ajax in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/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>

Furthermore, the callback function can have three different parameters and they are as follows:

responseTxt — This incorporates the resulting content if the request succeeds.
statusTxt — This incorporates the status of the request which may either be success or error.
jqXHR — This incorporates the XMLHttpRequest object.

Below is 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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Showing Ajax Load Request Status in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/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 permits only a portion of the document to be fetched and this is clearly achieved by appending the URL parameter with a space followed by a jQuery selector.

Below is a clear picture of loading page fragments.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading a Portion of External Page using Ajax in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#box").load("/examples/html/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 indicates the portion of the "test-content.html" file to be inserted inside the DIV box, which is an element that has the ID feature with a value hint i.e. id="hint" within the URL parameter (line no-10), check the first example.

-Advertisement-