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 相关文章推荐
可实现多表单提交的javascript函数
Aug 01 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
JavaScript find()方法及返回数据实例
Apr 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具体实现代码
2010/10/12 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
微信小程序实现选项卡功能
2020/06/19 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Python操作Excel之xlsx文件
2017/03/24 Python
pandas带有重复索引操作方法
2018/06/08 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
Python函数调用追踪实现代码
2020/11/27 Python
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
教师应聘个人求职信
2013/12/10 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
《春天来了》教学反思
2014/04/07 职场文书
安全目标责任书
2014/07/22 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python