AJAX load() method in jQuery

Method load() in jQuery

The load() method in jQuery is a straightforward but effective AJAX approach.

The load() method retrieves information from the database and places it in the factor indicates.

Syntax:

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

The URL you want to load is indicated by the required URL argument.

The data argument, which is optional, defines a set of querystring pair of keys to submit with said response.

The additional callback parameter defines the name of a function that will be invoked when the load() method has concluded.

"demo test.txt" comprises the following subject matter:

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>

The demo under inserts the contents of the file "demo test.txt" into a designated <div> element:

Illustration:

EXAMPLE ❯


A jQuery selector can also be applied to the URL object.

The following example inserts the id="p1" element from the file "demo test.txt" into a given <div> element:

Illustration:

EXAMPLE ❯


When the load() method is done, the optional callback data signal a callback function to run. Different parameters can be used in the callback function:

responseTxt - If the call is successful, it holds the resultant content.

statusTxt - It contains information about the call's status.

xhr - It has the XMLHttpRequest object in it.

After the load() method finishes, the illustration displays an alert box. It displays "External material loaded successfully!" if the load() method succeeds, and also an error message if something continues to fail:

Illustration:

EXAMPLE ❯