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 获取网页参数系统
Jul 19 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
javascript 的Document属性和方法集合
Jan 25 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 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调用C代码的实现方法
2014/03/11 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
json数据的列循环示例
2013/09/06 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Pytorch之finetune使用详解
2020/01/18 Python
python有几个版本
2020/06/17 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
电子商务网站的创业计划书
2014/01/05 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
生活委员竞选稿
2015/11/21 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技