jQuery ajax - load() method
Example
Use AJAX requests to change the text of the div element:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Definition and Usage
The load() method loads data from the server via AJAX requests and places the returned data into the specified element.
Note:there is also a named load of jQuery eventmethod. Which one to call depends on the parameters.
syntax
load(url,data,function(response,status,xhr))
| parameters | description |
|---|---|
| url | Specifies the URL to which the request is to be sent. |
| data | Optional. Specifies the data to be sent to the server along with the request. |
| function(response, status, xhr) |
Optional. Specifies the function to be executed when the request is completed. Additional parameters:
|
Detailed explanation
This method is the simplest way to retrieve data from the server. It is almost equivalent to $.get(url, data, success), but it is not a global function and has an implicit callback function. When a successful response is detected (for example, when textStatus is "success" or "notmodified"), .load() will set the HTML content of the matched element to the returned data. This means that most uses of this method will be very simple:
$("#result").load("ajax/test.html");
If a callback function is provided, it will be executed after the post-processing is performed:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
In the above two examples, if the current document does not contain the "result" ID, the .load() method will not be executed.
If the provided data is an object, use the POST method; otherwise, use the GET method.
Loading page fragments
The .load() method, unlike $.get(), allows us to specify a part of the remote document to be inserted. This is achieved through the special syntax of the url parameter. If the string contains one or more spaces, the string following the first space is the jQuery selector that determines the content to be loaded.
We can modify the above example so that we can use a part of the obtained document:
$("#result").load("ajax/test.html #container");
If this method is executed, it will retrieve the content of ajax/test.html, but then, jQuery will parse the returned document to find elements with the container ID. This element, along with its content, will be inserted into the element with the result ID, and the rest of the retrieved document will be discarded.
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, the browser often filters out elements from the document, such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as those retrieved directly by the browser.
Note:Due to browser security restrictions, most "Ajax" requests comply with the same-origin policy; requests cannot successfully retrieve data from different domains, subdomains, or protocols.
More examples
Example 1
Load the content of the feeds.html file:
$("#feeds").load("feeds.html");
Example 2
Similar to the above example, but send additional parameters in POST form and display information on success:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
Example 3
Load the navigation part of the article sidebar into an unordered list:
HTML code:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery code:
$("#links").load("/Main_Page #p-Getting-Started li");
More TIY examples
- Generate AJAX requests and send data through the request
- How to use data parameters to send data through AJAX requests. (This example is explained in the AJAX tutorial.)
- Generate AJAX requests and use callback functions
- How to use function parameters to handle data results from AJAX requests.
- Generate an AJAX request with errors
- How to use function parameters to handle errors in AJAX requests (using XMLHttpRequest parameters).
