Jquery load method usage and notes

  • 2020-03-30 02:07:20
  • OfStack

The full format for calling the load method is: load(url, [data], [callback]), where
Url: Is the address of the file to be imported.
Data: Optional parameters; Since Load can import not only static HTML files, but also dynamic scripts, such as PHP files, we can put the parameters we want to pass here when we import dynamic files.
The callback: Optional parameters; Is another function that is executed after the load method is called and the server responds.

One: how to use data
1. Load a PHP file with no passing parameters
$(" # myID "). The load (" test. PHP ");
// import the result of test.php in the element with id #myID

Load a PHP file that contains a pass parameter
$(" # myID "). The load (" test. PHP, "{" name" : "Adam"});
// the imported PHP file contains a pass parameter, similar to: test.php? Name = Adam

Load a PHP file that contains multiple pass-through parameters. Note: the parameters are separated by commas
$(" # myID "). The load (" test. PHP, "{" name" : "Adam" and "site" : "61 dh.com"});
// the imported PHP file contains a pass parameter, similar to: test.php? name=Adam&site=61dh.com

Load a PHP file that takes an array as an argument
$(" # myID "). The load (" test. PHP ", {' myinfo [] ', [" Adam ", "61 dh.com"]});
// the imported PHP file contains an array of pass parameters.
Note: with load, these parameters are passed as POST, so in test.php, you can't GET them using GET.

Two: how do you use callback
For example, if we want to slowly display the loaded content after the load method gets the response from the server, we can use the callback function.

The code is as follows:


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

Ways to prevent jquery from using caching:
Caching speeds up page loading to a certain extent, but it often gets us into trouble. In the last article, I briefly introduced the use of Load in jQuery. In practice, we may encounter problems with browser caching. For example, I encountered this problem in IE7.

JQuery Load sample code:


$(document).ready(function(){ 
$("#labels").load("/blog/categories/labels.html"); 
//When the page loads, insert the contents of the label.html in the DOM element with ID #labels.
});

When I update the label.html, the load method still USES the old label.html in IE7, even if I press the refresh key. The good news is that jQuery provides a way to prevent ajax from using caching, by adding the following statement to the head javascript file.

$.ajaxSetup ({ 
cache: false //Turn off the corresponding cache for AJAX
});

In addition, I will introduce several ways to deal with caching. Note: I have not tested the jQuery load problem, these methods are for reference only!

1. Change file names, such as lables_new.html to lables_new.html.

2. Add a specific time, such as lables.html, to the labels. 20081116. In practice, I use this method to keep files from being cached after I update my CSS /javascript files.

3. Add the following declaration at 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 not only call HTML, but also call script, such as records.php. You can use the header function in the PHP file:


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

Special usage of load:
Add a space to the url of load followed by a selector.
Example: I need the content of load test.html, and I just need the content with id a.
$(" body "). The load (" test. HTML # a ");


Related articles: