Usage and Analysis of JQuery ($. load) Events

First, we need to know that the jquery load method is for jQuery. ajax () is encapsulated to facilitate our use of a method. When we need to process more complex logic, we still need to use jQuery. ajax () is a comprehensive method.

Complete syntax format for calling the load method: load (url, [data], [callback])
Url indicates the address of the file to be imported.
Data: an optional parameter. Because load can not only import static html files, but also dynamic scripts, such as PHP files, when importing dynamic files, we can put the parameters to be passed here.
Callback: an optional parameter. It is another function that is executed after the load method is called and the server response is obtained.

The following are examples:

1. Load a PHP file without passing parameters.

Copy codeThe Code is as follows:
$ ("# MyID"). load ("/test. php"); // import the result after test. php is run in the element whose id is # myID

2. Load a PHP file that contains a passing Parameter

Copy codeThe Code is as follows:
$ ("# MyID "). load ("/test. php ", {" name ":" Adam "}); // The imported php file contains a transfer parameter, similar to the request url:/test. php? Name = Adam

3. Load a PHP file that contains multiple passing parameters. Note: parameters are separated by commas (,).

Copy codeThe Code is as follows:
$ ("# MyID "). load ("/test. php ", {" name ":" Adam "," site ":" www.lhy-seo.com "}); // The imported php file contains a passing parameter, similar to the request url:/test. php? Name = Adam & site = www.phpernote.com

4. Load a PHP file. The php file uses an array as the transmission parameter.

Copy codeThe Code is as follows:
$ ("# MyID "). load ("/test. php ", {'myinfo [] ', [" Adam "," www.lhy-seo.com "]}); // The imported php file contains an array to pass parameters.

Note: using load, these parameters are passed in POST mode. Therefore, you cannot use GET to obtain parameters in/test. php.

5. How to Use callback. For example, you can use the callback function to slowly display the loaded content after the load method obtains the server response.The Code is as follows:

Copy codeThe Code is as follows:
$ ("# Go"). click (function (){
$ ("# MyID"). load ("welcome. php", {"lname": "Cai", "fname": "Adam", function (){
$ ("# MyID"). fadeIn ('low ');}
);
});

6. Load page fragments

The. load () method allows us to specify a part of the remote document to be inserted. This is implemented through the special Syntax of url parameters. If the string contains one or more spaces, the string followed by the first space is the jQuery selector that determines the loaded content. For example:

Copy codeThe Code is as follows:
$ ("# Result"). load ("/test.html # container ");

7. Prevent jquery load from using the cache

Caching speeds up page loading to some extent, but it often brings us trouble. In practice, we may encounter browser cache problems. For example, I encountered this problem in IE7.

Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Labels"). load ("/test.html ");
// Insert test.html content in the domelement with the idlabelswhen the page is mounted.
});

When I updated test.html, I used test.html in ie7, even if I press the refresh key. Fortunately, jQuery provides a method to prevent ajax from using the cache. You can solve the problem by adding the following statements to the javascript file of the head.

Copy codeThe Code is as follows:
$. AjaxSetup ({
Cache: false // disable the corresponding AJAX cache
});

In addition, I will introduce several methods to solve the cache. Note: I have not tested jQuery load. These methods are for reference only!

1. Change the file name to lables_new.html, but there is no way to do this.

2.add a specific time after test.html, such as test.html? 20081116. In practice, after I update css/javascript files, I use this method to prevent files from being cached.

3.add the following statement to the top of the test.html file:

Copy codeThe Code is as follows:
<META HTTP-EQUIV = "Pragma" CONTENT = "no-cache">
<META HTTP-EQUIV = "Expires" CONTENT = "-1">

When using jquery load, note the following:

(1) If bound to a window object, it will be triggered after all content is loaded, including the window, frame, object, and image. If it is bound to an element, it is triggered after the content of the element is loaded.

(2) only when the load handler is bound before the element is fully loaded will it be triggered after it is loaded. If it is bound later, it will never be triggered. Therefore, do not bind the load event in $ (document). ready (), because jQuery will bind the load event after all DOM loads are completed.

(3) jQuery uses the. innerHTML attribute of the browser 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