Usage and precautions of the load method in jquery_jquery

The complete format of calling the load method is: 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 you 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.

1: How to use data
1. Load a php file that does not contain passing parameters
$("#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
$("#myID").load("test.php",{"name" : "Adam"});
//The imported php file contains a passing parameter, similar to: test.php?name=Adam

3. Load a php file that contains multiple passed parameters. Note: Separate parameters with commas
$("#myID").load("test.php",{"name" : "Adam" , "site": "61dh.com"});
//The imported php file contains a passing parameter, similar to: test.php?name=Adam&site=61dh.com

4. Load a php file that uses an array as a passing parameter
$("#myID").load("test.php",{'myinfo[]', ["Adam", " 61dh.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.

2: 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 the codeThe code is as follows:

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

Prevent jquery from using cache Method:
Caching speeds up page loading to a certain extent, but it often brings us trouble. In my previous article, I briefly introduced the use of the Load method in jQuery. In actual application, we may encounter browser cache problems. For example, I encountered this problem in IE7.

jQuery Load sample code:

Copy code The code is as follows:

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

After I updated labels.html, the load method in IE7 still uses the old labels. html, 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 the 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 labels.html to labels_new.html, but this is a no-brainer and generally no one does this.

2. Add a specific time after labels.html, such as labels.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 labels.html file:

4. The load function can not only call HTML, but also call script, such as labels.php. You can use the header function in the php file:

Copy code The code is as follows:

header("Cache-Control: no-cache, must-revalidate");
?>

Special usage of load:
Add a space after the selector in the load url.
Example: I need to load the content of test.html and only need the content with the id a.
$("body").load("test.html #a");