Home > Web Front-end > JS Tutorial > jQuery load method usage collection_jquery

jQuery load method usage collection_jquery

WBOY
Release: 2016-05-16 17:58:37
Original
1187 people have browsed it

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 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.
1: How to use data
1. Load a php file that does not contain passing parameters
$("#myID").load("test.php") ;
//Import the result after running 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, the php file 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 code The code is as follows:

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

How 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:
Copy code The code is as follows:

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

After I updated labels.html, the load method in IE7 still uses the old labels.html, even if I press refresh. The keys don't work either. 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 followed by 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");
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template