About the usage and analysis of JQuery ($.load) event_jquery

First of all, we need to be clear that the jquery load method is a method that encapsulates jQuery.ajax() for our convenience. When we need to deal with more complex logic, we still need to use the comparison of jQuery.ajax() of a comprehensive approach.

The complete syntax format for calling the load method: load( url, [data], [callback] )
where: url refers to the address of the file to be imported.
data: Optional parameter; because load can not only import static html files, but also dynamic scripts, such as PHP files, so when we want to import dynamic files, we can put the parameters to be passed here.
callback: optional parameter; refers to another function that is executed after calling the load method and getting a response from the server.

A few usage examples are given below:

1. Load a php file that does not contain passing parameters

Copy code Code As follows:

$("#myID").load("/test.php");//The result after importing test.php in the element with id #myID

2. Load a php file that contains a passing parameter

Copy code Code As follows:

$("#myID").load("/test.php",{"name":"Adam"});//The imported php file contains a passing parameter, Similar to the request url: /test.php?name=Adam

3. Load a php file that contains multiple passed parameters. Note: Separate the parameters with commas

Copy the code The 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 that uses an array as a passing parameter

Copy code The code is as follows:

$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com" ]});//The imported php file contains an array passing parameter.

Note: When using load, these parameters are passed in POST, so in /test.php, GET cannot be used to obtain parameters.

5. How to use callback. For example, if we want to slowly display the loaded content after the load method gets the server response, we can use the callback function. The code is as follows:

Copy code The code is as follows:

$("#go" ).click(function(){
$("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam", function(){
$("#myID").fadeIn('slow');}
);
});

6. Load page fragments

The

.load() method allows us to specify a certain part of the remote document to be inserted. This is achieved through a special syntax for url parameters. If the string contains one or more spaces, the string following the first space is the jQuery selector that determines what is loaded. For example:

Copy code The code is as follows:

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

7. Methods to prevent jquery load from using cache

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

Copy code The code is as follows:

$(document).ready(function(){
$("#labels").load("/test.html");
//When the page is loaded, insert the content of test.html into the DOM element with the ID #labels
}. );

After I updated test.html, the load method in IE7 still uses the old test.html, and it doesn’t work even if I press the refresh key. Fortunately, jQuery provides a method to prevent ajax from using cache. Add the following statement to the head javascript file to solve the problem.

Copy code The code is as follows:

$.ajaxSetup({
cache: false / /Close AJAX corresponding cache
});

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

1. Change the file name, such as changing test.html to labels_new.html, but this is a no-brainer, and generally no one does this.

2. Add a specific time after test.html, such as test.html?20081116. In actual work, after I update the css/javascript file, I always use this method to prevent the file from being cached.

3. Add the following statement at the top of the test.html file:

Copy the code The code is as follows:

In addition, when using jquery load, you need to pay attention to the following:

(1) If bound to the window object, it will be triggered after all content is loaded, including windows, frames, objects and images. If bound to an element, it fires when the element's content is loaded.

(2) Only if the load processing function is bound before this element is completely loaded, it will be triggered after it is loaded. If you bind it later, it will never trigger. So don't bind the load event in $(document).ready(), because jQuery will bind the load event after all DOM loading is completed.

(3) jQuery uses the browser's .innerHTML attribute to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document, such as ,