Usage and precautions of the load method in jquery

This article mainly introduces the usage of the load method in jquery and Notes in detail. Friends who need it can come and refer to it. I hope it will be helpful to everyone

The complete format of calling the load method is: load(url, [data], [callback]), where
url: refers to the file to be imported address.
data: optional parameters; because Load can not only import statichtml files, but also dynamic scripts, such as PHP files, so you need When importing a dynamic file, 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 the passing parameters
$("#myID") .load("test.php");
//Import the result of running test.php in the element with ID #myID

2. Load a php file that contains a pass Parameters
$("#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, which uses the array as Pass parameters
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//Imported php The file contains an array of passed parameters.
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:

The code is as follows:

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

Method to prevent jquery from using cache:
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:

The code is as follows:

$(
document
).ready(function(){ 
$("#labels").load("/blog/categories/labels.html"); 
//在页面装载时，在ID为#labels的DOM元素里插入labels.html的内容。 
});

When I updated labels.html, the load method in IE7 Still using the old labels.html, even if I press refresh it doesn't work. Fortunately, jQuery provides a method to prevent ajax from using cache. Add the following statement to the javascript file in the head to solve the problem.

The code is as follows:

$.ajaxSetup ({ 
cache: false //关闭AJAX相应的缓存 
});

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:

The code is as follows:

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

Special usage of load:
Add a space after the url of load to select device.
Example: I need to load the content of test.html, and only need to take the content with the ID a.
$("body").load("test.html #a");

The above is the detailed content of Usage and precautions of the load method in jquery. For more information, please follow other related articles on the PHP Chinese website!