Ajax Load HTML page

JQuery Ajax-load () method

JQuery Ajax Reference Manual Example

Use an AJAX request to change the text of a DIV element:

$ ("button"). Click (function () {  $ ("div"). Load (' Demo_ajax_load.txt ');});

Try it yourself.

You can find more tiy instance definitions and usage at the bottom of the page

The load () method loads the data from the server through an AJAX request and places the returned data into the specified element.

Note: There is also a JQuery event method named load. Which is called, depends on the parameter. Grammar

Load (URL,data,function (RESPONSE,STATUS,XHR))

Parameters
Describe

Url
Specifies which URL to send the request to.

Data
Optional. Specifies the data that is sent to the server along with the request.

function (RESPONSE,STATUS,XHR)

Optional. Specifies the function to run when the request is complete.

Additional parameters:

• Response -Contains the result data from the request
• Status-contains the requested State ("Success", "Notmodified", "Error", "timeout", or "ParserError")
• xhr -Contains XMLHttpRequest objects

Detailed description

This method is the simplest way to get data from the server. It is almost equivalent to $.get (URL, data, success), unlike it is not a global function, and it has an implicit callback function. When a successful response is detected (for example, when Textstatus is "success" or "notmodified"),. Load () sets the HTML content of the matching element to the returned data. This means that most of the use of this method can be very simple:

$ ("#result"). Load ("ajax/test.html");

If a callback function is provided, the function executes after post-processing is executed:

$ ("#result"). Load ("ajax/test.html", function () {  alert ("Load was performed.");});

In the two above example, if the current document does not contain a "result" ID, the. Load () method is not executed.

Use the POST method if the supplied data is an object, otherwise use the GET method. Loading page fragments

The. Load () method, unlike $.get (), allows us to specify a portion 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 immediately preceding the first space is the jQuery selector that determines what is loaded.

We can modify the example above so that we can use a portion of the obtained document:

$ ("#result"). Load ("ajax/test.html #container");

If the method is executed, the contents of the ajax/test.html are retrieved, but then JQuery parses the returned document to find the element with the container ID. The element, along with its contents, is inserted into the element with the result ID, and the remainder of the retrieved document is discarded.

JQuery uses the browser's. InnerHTML property to parse the retrieved document and insert it into the current document. In this process, the browser often filters out elements from the document, such as

Note: Due to browser security restrictions, most "Ajax" requests adhere to the same-origin policy, and requests cannot successfully retrieve data from different domains, subdomains, or protocols. More examples of examples 1

Loading the contents of the feeds.html file:

$ ("#feeds"). Load ("feeds.html");

Example 2

Similar to the above instance, but sends additional parameters as POST and displays information on success:

$ ("#feeds"). Load ("feeds.php", {limit:25}, function () {  alert ("The last entries in the feed has been loaded");});

Example 3

Load the sidebar navigation section of the article to an unordered list:

HTML Code:

<b>jquery links:</b><ul id= "Links" ></ul>

JQuery Code:

$ ("#links"). Load ("/main_page #p-getting-started li");

Ajax Load HTML page