关于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中各字符串出现次数的工具
May 03 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
jquery实现图片轮播器
May 23 jQuery
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
微信小程序实现图片压缩
Dec 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
JS实现的自定义网页拖动类
2015/11/06 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Windows下安装Scrapy
2018/10/17 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python新手学习可变和不可变对象
2020/06/11 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
校园招聘策划书
2014/01/09 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
信用卡工作证明模板
2014/09/14 职场文书
刑事起诉书范文
2015/05/19 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
导游词之江南周庄
2019/12/06 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers