jQuery AJAX load() Method
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: 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.
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.
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:
In this case, the server.php script can access the sent data using PHP like this:
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.
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).
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.