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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 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加密解密实用类分享
2014/01/07 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
JS简单获取及显示当前时间的方法
2016/08/03 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
python中as用法实例分析
2015/04/30 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
基于keras中的回调函数用法说明
2020/06/17 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书