关于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 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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查询搜索引擎排名位置的代码
2010/01/05 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Python3安装Pymongo详细步骤
2017/05/26 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python读取实时数据流示例
2019/12/02 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
加强干部作风建设整改方案
2014/10/24 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
个人向公司借款协议书
2016/03/19 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记