关于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 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
详解JavaScript常量定义
Jan 03 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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
上海无线电三厂简史修改版
2021/03/01 无线电
实用函数5
2007/11/08 PHP
PHP PDO函数库详解
2010/04/27 PHP
深入PHP操作MongoDB的技术总结
2013/06/02 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
php代码架构的八点注意事项
2016/01/25 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
解决小程序无法触发SESSION问题
2020/02/03 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python手机号码归属地查询代码
2016/05/04 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python中的引用知识点总结
2019/05/20 Python
Python使用configparser库读取配置文件
2020/02/22 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
四风自我剖析材料思想汇报
2014/10/01 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python