关于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 相关文章推荐
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 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基础知识:函数基础知识
2006/12/13 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
JavaScript 创建对象
2009/07/17 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
Express.JS使用详解
2014/07/17 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
python同时遍历数组的索引和值的实例
2018/11/15 Python
python实现简易淘宝购物
2019/11/22 Python
python实现FTP循环上传文件
2020/03/20 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
python 实现图片裁剪小工具
2021/02/02 Python
介绍一些UNIX常用简单命令
2014/11/11 面试题
党的群众路线对照检查材料
2014/09/22 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
大学生自荐材料范文
2014/12/30 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书