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 相关文章推荐
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
深入理解javascript中的this
Feb 08 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
php中目录,文件操作详谈
2007/03/19 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php验证是否是md5编码的简单代码
2014/04/01 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
nullJavascript中创建对象的五种方法实例
2013/05/07 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
python爬虫获取多页天涯帖子
2018/02/23 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
为什么python比较流行
2020/06/19 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
nohup的用法
2014/08/10 面试题
小露珠教学反思
2014/04/30 职场文书
优秀家长事迹材料
2014/05/17 职场文书
新学期开学演讲稿
2014/05/24 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS