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 相关文章推荐
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
vue实现中部导航栏布局功能
Jul 30 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实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
js函数setTimeout延迟执行的简单介绍
2013/07/17 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
python+pygame简单画板实现代码实例
2017/12/13 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python 下载及安装详细步骤
2019/11/04 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Python求凸包及多边形面积教程
2020/04/12 Python
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
简述数据库的设计过程
2015/06/22 面试题
Shell如何接收变量输入
2016/08/06 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
国庆节新闻稿
2015/07/17 职场文书
九不准学习心得体会
2016/01/23 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书