jQuery load方法用法集锦


Posted in Javascript onDecember 06, 2011

调用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=Adam
3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔
$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"});
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com
4. 加载一个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');} 
); 
});

防止jquery使用缓存的方法:
缓存这东西,在一定程度上加快了页面的装载,但是也常常给我们带来麻烦。我在上篇文章里简单介绍了jQuery中Load方法的使用。在实际运用中,我们可能会碰到浏览器缓存的问题。比如我就在IE7里碰到这个问题。
jQuery Load样本代码:
$(document).ready(function(){ 
$("#labels").load("/blog/categories/labels.html"); 
//在页面装载时,在ID为#labels的DOM元素里插入labels.html的内容。 
});

当我更新了labels.html以后,在IE7里load方法仍旧在使用旧的labels.html,就算我按刷新键也不管用。好在jQuery提供一个防止ajax使用缓存的方法,把下面的语句加在head的javascript文件里,就可以解决问题。
$.ajaxSetup ({ 
cache: false //关闭AJAX相应的缓存 
});

此外我再介绍几种方法解决缓存的方法。注意:我没有在jQuery load的问题上测试过,这些方法仅供参考!
1.更改文件名,比如把labels.html改成lables_new.html,但是这是没有办法的办法,一般没有人这么做。
2.在labels.html后加上特定时间,比如lables.html?20081116。在实际工作中,在我更新css/javascript文件后,我都是用这种办法来防止文件被缓存。
3.在labels.html文件的顶部加入以下声明:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
4.load函数不仅可以调用HTML,也可以调用script,比如labels.php,可以在php文件里使用header函数:
<?php 
header("Cache-Control: no-cache, must-revalidate"); 
?>

load的特殊用法:
在load的url里加上空格后面就可以跟选择器了。
举例:我需要load test.html的内容,并只要取id为a的内容。
$("body").load("test.html #a");
Javascript 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 #Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 #Javascript
js Function类型
Dec 04 #Javascript
Javascript base64编码实现代码
Dec 02 #Javascript
JS获取页面窗口大小的代码解读
Dec 01 #Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 #Javascript
jQuery 中使用JSON的实现代码
Dec 01 #Javascript
You might like
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
twig里使用js变量的方法
2016/02/05 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
php无限极分类实现方法分析
2019/07/04 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
js闭包用法实例详解
2016/12/13 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
Python re模块介绍
2014/11/30 Python
Python中defaultdict与lambda表达式用法实例小结
2018/04/09 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
利用Python如何批量修改数据库执行Sql文件
2018/07/29 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
大学生先进事迹材料
2014/02/16 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
2016新年年会主持词
2015/07/06 职场文书
2015国庆节感想
2015/08/04 职场文书
同学聚会祝酒词
2015/08/10 职场文书