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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
vue + axios get下载文件功能
Sep 25 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
详解React 元素渲染
Jul 07 Javascript
前端JavaScript大管家 package.json
Nov 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
php判断变量类型常用方法
2012/04/24 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
pycham查看程序执行的时间方法
2018/11/29 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
办理信用卡工作证明
2014/01/11 职场文书
小区门卫值班制度
2014/01/24 职场文书
学校卫生检查制度
2014/02/03 职场文书
科级干部考察材料
2014/02/15 职场文书
爱耳日活动总结
2014/04/30 职场文书
邀请函的格式
2015/01/30 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis