Jquery. load () and jquery. load

Source: Internet
Author: User

Jquery. load () and jquery. load

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

  • url: 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, when importing dynamic files, we can put the parameters to be passed here.
  • callback: 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: UseloadThese parameters are passed in POST mode. Therefore, GET cannot be used to obtain parameters in test. php.

Ii. How to Use callback

For exampleLoad MethodAfter receiving the server response, you can usecallbackFunction. The Code is as follows:

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

Demonstration and download: jQuery-Load

Methods To prevent jquery from Using Cache:

Caching speeds up page loading to some extent, but it often brings us trouble .. In practice, we may encounter browser cache problems. For example, I encountered this problem in IE7.

JQuery Load sample code:

$(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 updatelabels.htmlLater, the load method in IE7 is still using the oldlabels.htmlEven if I press the refresh key, it doesn't work. Fortunately, jQuery provides a method to prevent ajax from using the cache, and adds the following statementsheadTo solve the problem.

$.ajaxSetup ({
Cache: false // disable the corresponding AJAX cache
});

In addition, I will introduce several methods to solve the cache.Note:I am notjQuery loadThese methods are for reference only!

1. Change the file name, for examplelabels.htmlChangelables_new.htmlBut there is no way to do this. Generally, no one does.

2. Inlabels.htmlAdd a specific time, suchlables.html?20081116. In practice, after I update css/javascript files, I use this method to prevent files from being cached.

3. Inlabels.htmlAdd the following statement to the top of the file:

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

4.loadFunctions can call not only HTML, but also scripts, suchlabels.php, Which can be used in the PHP FileheaderFunction:

<?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.

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.