jQuery AJAX load() Method

By: Rajesh P.S.

The load() method in jQuery is used to fetch data from the server and insert it into the selected element(s) without having to refresh the entire page. It's a convenient way to load and display content dynamically on a webpage.

Syntax:

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

selector: This specifies the element(s) where you want to insert the loaded content.
url: The URL of the server resource you want to retrieve and load.
data (optional): A set of key-value pairs that can be sent to the server along with the request, typically used for HTTP GET or POST parameters.
callback (optional): A function that is executed once the load() method is complete.

Basic Usage

Let's say you have a div element with the ID "result" on your webpage, and you want to load content from an external HTML file into it.

Continue Reading...

<div id="result">Content will be loaded here.</div> $(document).ready(function() { $("#result").load("external.html"); });

In this example, when the document is ready, the content of the "external.html" file will be loaded into the div with the ID "result."

Sending Data to the Server

You can also send data to the server using the load() method. Let's send a request with some parameters to a server script:

$(document).ready(function() { $("#result").load("server.php", { name: "John", age: 30 }); });

In this case, the server.php script can access the sent data using PHP like this:

$name = $_GET['name']; $age = $_GET['age'];

Using a Callback Function

You can specify a callback function to be executed once the content is loaded. This can be useful for performing actions after the data is inserted into the DOM.

$(document).ready(function() { $("#result").load("external.html", function(responseTxt, statusTxt, xhr) { if (statusTxt === "success") { console.log("Content loaded successfully!"); } if (statusTxt === "error") { console.log("Error: " + xhr.status + ": " + xhr.statusText); } }); });

In this example, the callback function receives three parameters: responseTxt (the response text from the server), statusTxt (the status of the request, either "success" or "error"), and xhr (the XMLHttpRequest object).

Conclusion

The jQuery AJAX load() method simplifies the process of asynchronously fetching and inserting content from a server into selected HTML elements on a webpage. It allows you to dynamically update parts of your page without requiring a full page refresh, making it a versatile tool for creating responsive and interactive web applications.

Next > Difference between document.ready() and body onload()?

Related Topics

More Related Topics.....