关于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 打印内容方法小结
Nov 04 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php ci框架验证码实例分析
2013/06/26 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
python xml解析实例详解
2016/11/14 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python如何实现邮件功能
2020/05/27 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
电气技术员岗位职责
2013/11/19 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
英文自荐信范文
2015/03/25 职场文书
同意报考公务员证明
2015/06/17 职场文书
python基础之爬虫入门
2021/05/10 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技