关于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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
JavaScript如何判断input数据类型
2020/02/06 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python绘制七段数码管实例代码
2017/12/20 Python
linux环境下Django的安装配置详解
2019/07/22 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
boostrap modal 闪现问题的解决方法
2020/09/01 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
计算机专业求职信
2014/06/02 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
债务授权委托书范本
2014/10/17 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技