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选择器的工作原理和优化分析
Jul 25 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
react-router中的属性详解
Jun 01 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
JS封装cavans多种滤镜组件
Feb 15 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标签云的实现代码
2012/10/10 PHP
php错误级别的设置方法
2013/06/17 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
php中上传文件的的解决方案
2018/09/25 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python基础语言学习笔记总结(精华)
2017/11/14 Python
python实现识别手写数字 python图像识别算法
2020/03/23 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
会议开场欢迎词
2014/01/15 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
机关门卫制度
2014/02/01 职场文书
安全责任书范本
2014/04/15 职场文书
村党支部公开承诺书
2014/05/29 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
邀请书格式范文
2015/02/02 职场文书
学校运动会简讯
2015/07/20 职场文书
中秋节祝酒词
2015/08/12 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python