jQuery - AJAX load() Method


The load() function of jQuery is a basic yet effective AJAX technique.

The load() function fetches data from a server and places it in the specified element.

Syntax :-

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

The URL parameter is required one. The URL you want to load is specified by the parameter.

The data and callback parameters are optional.

The data parameter defines a set of querystring key/value pairs to submit with the request.

The callback parameter specifies the name of a function that will be called when the load() method has finished.

Example:-

Here is the content of our example file: "demo.htm" :

<h2>A html sample page</h2>
<p>Welcome to html demo page.</p>

The content of the file "demo.htm" is loaded into a particular div element in the example below :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b1").click(function () {
            $("#div1").load("jquery-resources/demo.htm");
        });
    });
</script>
</head>
<body>

<div id="div1">Let jQuery AJAX Change This Text</div>
<br />
<button id="b1">Load External Content</button>


</body>
</html>

Output :-

Let jQuery AJAX Change This Text



The load() Method with Callback Function

When the load() procedure is done, the optional call-back parameter defines a callback function to run. The callback function may contain several parameters :

  • responseTxt - includes the results if the call successfully completes.
  • statusTxt - Includes the call status.
  • xhr - XMLHttpRequest object is stored here.

After the load() function completes, the following example shows an alert box. It shows "External material loaded successfully!" if the load() function succeeds, and an error message if it fails :

Example:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#b3").click(function () {
            $("#div3").load("jquery-resources/demo.htm", function (responseTxt, statusTxt, xhr) {
                if (statusTxt == "success")
                    alert("External content loaded successfully!");
                if (statusTxt == "error")
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
            });
        });
    });
</script>
</head>
<body>

<div id="div3">Let jQuery AJAX Change This Text</div>
<br />
<button id="b3">Get External Content</button>

</body>
</html>

Output :-

Let jQuery AJAX Change This Text


You can also search for these topics, working of jquery ajax load function, how to execute complete function jquery ajax load, append, select options, script and execute using jquery ajax load method, multiple files used in ajax load method, jquery ajax load post and type method, text file, how to use another page into a div load content from jquery, list out parameters, ajax load method blocking and external page into div using jquery, syntax an example, how to execute callback function by jquery ajax load method.