jquery load事件(callback/data)使用方法及注意事项


Posted in Javascript onFebruary 06, 2013

如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。因此,使用load方法时尽量把load方法写在页面顶部。

调用load方法的完整格式是:load( url, [data], [callback] ),
其中:
•url:是指要导入文件的地址。
•data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
•callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。

一:如何使用data
1.加载一个php文件,该php文件不含传递参数$("#myID").load("test.php");
//在id为#myID的元素里导入test.php运行后的结果2. 加载一个php文件,该php文件含有一个传递参数
$("#myID").load("test.php",{"name" : "Adam"});
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔
$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com4. 加载一个php文件,该php文件以数组作为传递参数
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//导入的php文件含有一个数组传递参数。注意:使用load,这些参数是以POST的方式传递的,因此在test.php里,不能用GET来获取参数。

二:如何使用callback
比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。代码如下:

$("#go").click(function(){ 
$("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){ 
$("#myID").fadeIn('slow');} 
); 
});

备注:
在load的url里加上空格后面就可以跟选择器了。
例如:
$("body").load("test.html #a");
Javascript 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
读jQuery之八 包装事件对象
Jun 21 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 #Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 #Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 #Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 #Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 #Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 #Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 #Javascript
You might like
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
js实现二级导航功能
2017/03/03 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
React复制到剪贴板的示例代码
2017/08/22 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python解惑之整数比较详解
2017/04/24 Python
Python操作json的方法实例分析
2018/12/06 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
酒店个人求职信范文
2014/01/25 职场文书
调研报告的主要写法
2019/04/18 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
服务器间如何实现文件共享
2022/05/20 Servers