关于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 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 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网站在线人数统计
2008/04/09 PHP
php强制下载类型的实现代码
2011/04/21 PHP
解析yii数据库的增删查改
2013/06/20 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python常用的爬虫技巧总结
2016/03/28 Python
Python中xml和json格式相互转换操作示例
2018/12/05 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
幼儿园教研活动方案
2014/01/19 职场文书
大学生暑期实践感言
2014/02/26 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
单位委托书范本
2014/04/04 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
计算机专业自荐信
2015/03/05 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
python脚本框架webpy模板赋值实现
2021/11/20 Python
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript