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


Posted in Javascript onFebruary 22, 2014

调用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");
Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
jQuery 表格工具集
Apr 25 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 #Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 #Javascript
文本框水印提示效果的简单实现代码
Feb 22 #Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
You might like
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php实现webservice实例
2014/11/06 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
ES6中数组array新增方法实例总结
2017/11/07 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python字符串替换第一个字符串的方法
2019/06/26 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
django中嵌套的try-except实例
2020/05/21 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
Prototype是怎么扩展DOM的
2014/10/01 面试题
总经理司机岗位职责
2014/02/06 职场文书
出生公证委托书
2014/04/03 职场文书
医学求职信
2014/05/28 职场文书
成都人事代理协议书
2014/10/25 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL