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 图像动画的小demo
May 23 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
vue 实现动态路由的方法
Jul 06 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实现Linux服务器木马排查及加固功能
2014/12/29 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
google地图的路线实现代码
2009/08/20 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
2018/10/24 jQuery
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
python循环监控远程端口的方法
2015/03/14 Python
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
用Python编写简单的定时器的方法
2015/05/02 Python
RC4文件加密的python实现方法
2015/06/30 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
快速查询Python文档方法分享
2017/12/27 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
python获取本机所有IP地址的方法
2018/12/26 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
大学生求职信
2014/06/17 职场文书
党员检讨书
2014/10/13 职场文书