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 相关文章推荐
EasyUI中的tree用法介绍
Nov 01 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
详解python深浅拷贝区别
2019/06/24 Python
Apache部署Django项目图文详解
2019/07/30 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
单位实习证明怎么写
2014/01/17 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
党支部综合考察意见
2015/06/01 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书