jquery中load方法的用法及注意事项说明

 本篇文章主要是对jquery中load方法的用法及注意事项进行了详细介绍,需要的朋友可以过来参考下,希望对大家有所帮助

调用load方法的完整格式是:load( url, [data], [callback] ),其中 
url:是指要导入文件的地址。 
data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。 
callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。 
 
一:如何使用data 
1.加载一个php文件,该php文件不含传递参数 
$("#myID").load("test.php"); 
//在id为#myID的元素里导入test.php运行后的结果 
 
2. 加载一个php文件,该php文件含有一个传递参数 
$("#myID").load("test.php",{"name" : "Adam"}); 
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam 
 
3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔 
$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"}); 
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com 
 
4. 加载一个php文件,该php文件以数组作为传递参数 
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]}); 
//导入的php文件含有一个数组传递参数。 
注意:使用load,这些参数是以POST的方式传递的,因此在test.php里,不能用GET来获取参数。 
 
二:如何使用callback 
比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。
 
代码如下:
 
$("#go").click(function(){ 
$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){ 
$("#myID").fadeIn('slow');} 
); 
}); 
 
防止jquery使用缓存的方法: 
缓存这东西,在一定程度上加快了页面的装载,但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中,我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。 
 
jQuery Load样本代码:
 
 代码如下:
$(document).ready(function(){ 
$("#labels").load("/blog/categories/labels.html"); 
//在页面装载时,在ID为#labels的DOM元素里插入labels.html的内容。 
});
 
当我更新了labels.html以后,在IE7里load方法仍旧在使用旧的labels.html,就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法,把下面的语句加在head的javascript文件里,就可以解决问题。 
 代码如下:
$.ajaxSetup ({ 
cache: false //关闭AJAX相应的缓存 
});
 
此外我再介绍几种方法解决缓存的方法。注意:我没有在jQuery load的问题上测试过,这些方法仅供参考! 
 
1.更改文件名,比如把labels.html改成lables_new.html,但是这是没有办法的办法,一般没有人这么做。 
 
2.在labels.html后加上特定时间,比如lables.html?20081116。在实际工作中,在我更新css/javascript文件后,我都是用这种办法来防止文件被缓存。 
 
3.在labels.html文件的顶部加入以下声明: 
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Expires" CONTENT="-1"> 
 
4.load函数不仅可以调用HTML,也可以调用script,比如labels.php,可以在php文件里使用header函数: 
 
 代码如下:
<?php 
header("Cache-Control: no-cache, must-revalidate"); 
?> 
 
load的特殊用法: 
在load的url里加上空格后面就可以跟选择器了。 
举例:我需要load test.html的内容,并只要取id为a的内容。 
$("body").load("test.html #a");

时间: 2024-09-17 14:40:22

jquery中load方法的用法及注意事项说明的相关文章

jquery中load方法的用法及注意事项说明_jquery

调用load方法的完整格式是:load( url, [data], [callback] ),其中 url:是指要导入文件的地址. data:可选参数:因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里. callback:可选参数:是指调用load方法并得到服务器响应后,再执行的另外一个函数. 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load(

jquery中one()方法的用法实例

 这篇文章主要介绍了jquery中one()方法的用法,实例分析了one()方法的功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery中one()方法的用法.分享给大家供大家参考.具体分析如下: jQuery中的one()方法:表示只执行一次,代码如下: 代码如下: <html> <head> <title>jquery事件:one()方法的使用</title> <script type="text/

jQuery中.live()方法的用法

 本篇文章主要是对jQuery中.live()方法的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法.   live(type, [data],fn)   概述   jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效.   这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择

谷歌不支持load方法-页面中动态的引入html页面使用了jQuery中load方法,但是谷歌浏览器不兼容怎么办?

问题描述 页面中动态的引入html页面使用了jQuery中load方法,但是谷歌浏览器不兼容怎么办? 火狐可以用,但是在谷歌浏览器不可以,我查了以后网上说是谷歌不支持load方法,那怎么办?求告谢谢 解决方案 http://blog.csdn.net/yy374864125/article/details/8983017 放在服务器上还是支持的. 解决方案二: 肯定支持,要发布网站后通过http协议进行访问,本地file浏览有跨域问题http://www.w3dev.cn/article/201

jquery中one()方法的用法实例_jquery

本文实例讲述了jquery中one()方法的用法.分享给大家供大家参考.具体分析如下: jQuery中的one()方法:表示只执行一次,代码如下: 复制代码 代码如下: <html> <head> <title>jquery事件:one()方法的使用</title> <script type="text/javascript" src="jquery-1.8.2.min.js"></script>

jQuery中delegate()方法的用法详解_jquery

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).delegate(childofselector,type,data,function) 参数说明: childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函

jQuery中.live()方法的用法深入解析_jquery

给jquery动态生成的页面元素添加事件?使用livequery插件,或可以使用jquery的live方法.摘录一段live简单使用方法. 更多详情还见官网 http://api.jquery.com/live/ live(type, [data],fn) 概述 jQuery给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效. 这个方法是基本是的 .bind() 方法的一个变体.使用 .bind()时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有.为

jQuery中toggle()方法的用法

toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏这些元素:如果被选元素隐藏,则显示这些元素. $(selector).toggle(speed,callback,switch); 该方法又可分解为: $(selector).toggle(speed,callback);//参数可选 $(selector).toggle(switch);// switch为true时显示,switch为false时隐藏: Speed:调整动画状态:渐变对象宽高.透明度等: Callback:回

jQuery中animate方法简单用法

animate()方法提供了自定义的动画,能够实现更加新颖的动画效果,其语法结构:  代码如下 复制代码 $(element).animate({  param1: value1,  param2: value2},  speed, function() {  /* stuff to do after animation is complete */ }); 简单案例一: 单击侧面划入一个图层DIV2,单击DIV2关闭图层:  代码如下 复制代码 <!DOCTYPE html> <htm