Usage and precautions of the load method in jquery

Usage and precautions of the load method in jquery

This article mainly introduces the usage and precautions of the load method in jquery. If you need it, you can refer to it for help.

The complete format for calling the load method is: load (url, [data], [callback]), where

Url: 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.

 

I. How to use data

1. Load a PHP file without passing parameters.

$ ("# 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

$ ("# 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 passing parameters. Note: parameters are separated by 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. The php file uses an array as the transmission parameter.

$ ("# MyID"). load ("test. php", {'myinfo [] ', ["Adam", "61dh.com"]});

// The imported PHP file contains an array for passing parameters.

Note: using load, these parameters are passed in POST mode. Therefore, GET parameters cannot be obtained in test. php.

 

Ii. 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:

 

$ ("# Go"). click (function (){

$ ("# MyID"). load ("welcome. php", {"lname": "Cai", "fname": "Adam", function (){

$ ("# MyID"). fadeIn ('low ');}

);

});

 

Methods To prevent jquery from Using Cache:

Caching speeds up page loading to some extent, but it often brings us trouble. In the previous article, I briefly introduced the use of the Load method in jQuery. In practice, 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 ");

// Insert the content of labels.html in the domelement with the idlabelswhen the page is mounted.

});

 

When I updated labels.html, I used the old labels.html file in ie7, even if I pressed 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.

The 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, such as labels.htmlto lables_new.html. But there is no way to do this. Generally, no one does.

 

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

<META HTTP-EQUIV = "Pragma" CONTENT = "no-cache">

<META HTTP-EQUIV = "Expires" CONTENT = "-1">

 

4. The load function can call not only HTML, but also 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 in the load url and you will be able to follow the selector.

For example, I need to load the content of test.html, and just take the content with id.

$ ("Body"). load ("test.html # ");