关于JQuery($.load)事件的用法和分析


Posted in Javascript onApril 09, 2013

首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法的。

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

下面给出几个用法示例:

1.加载一个php文件,该php文件不含传递参数

$("#myID").load("/test.php");//在id为#myID的元素里导入test.php运行后的结果

2. 加载一个php文件,该php文件含有一个传递参数

$("#myID").load("/test.php",{"name":"Adam"});//导入的php文件含有一个传递参数,类似于请求url:/test.php?name=Adam

3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔

$("#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"});//导入的php文件含有一个传递参数,类似于请求url:/test.php?name=Adam&site=www.phpernote.com

4. 加载一个php文件,该php文件以数组作为传递参数

$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com"]});//导入的php文件含有一个数组传递参数。

注意:使用load,这些参数是以POST的方式传递的,因此在/test.php里,不能用GET来获取参数。

5. 如何使用 callback,比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。代码如下:

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

6. 加载页面片段

.load() 方法允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。比如:

$("#result").load("/test.html #container");

7. 防止jquery load使用缓存的方法

缓存这东西,在一定程度上加快了页面的装载,但是也常常给我们带来麻烦。在实际运用中,我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。

$(document).ready(function(){
$("#labels").load("/test.html");
//在页面装载时,在ID为#labels的DOM元素里插入test.html的内容。
});

当我更新了test.html以后,在IE7里load方法仍旧在使用旧的test.html,就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法,把下面的语句加在head的javascript文件里,就可以解决问题。

$.ajaxSetup({
cache: false //关闭AJAX相应的缓存
});

此外我再介绍几种方法解决缓存的方法。注意:我没有在jQuery load的问题上测试过,这些方法仅供参考!

1.更改文件名,比如把test.html改成lables_new.html,但是这是没有办法的办法,一般没有人这么做。

2.在test.html后加上特定时间,比如test.html?20081116。在实际工作中,在我更新css/javascript文件后,我都是用这种办法来防止文件被缓存。

3.在test.html文件的顶部加入以下声明:

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

另外在使用 jquery load 的时候需要注意的是:

(1)如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。

(2)只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

(3)jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。


Javascript 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
js中settimeout方法加参数的使用实例
Feb 27 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 #Javascript
关于JavaScript中的关联数组分析
Apr 09 #Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 #Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 #Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 #Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 #Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 #Javascript
You might like
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python实现的简单万年历例子分享
2014/04/25 Python
python读写二进制文件的方法
2015/05/09 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
护理助产毕业生的求职信
2014/03/02 职场文书
硕士生工作推荐信
2014/03/07 职场文书
融资租赁计划书
2014/04/29 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
文明班级申报材料
2014/12/24 职场文书
稽核岗位职责
2015/02/10 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
手机销售员岗位职责
2015/04/11 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书