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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
Vue动态面包屑功能的实现方法
Jul 01 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
第七节--类的静态成员
2006/11/16 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
php 函数中使用static的说明
2012/06/01 PHP
php测试kafka项目示例
2020/02/06 PHP
prototype class详解
2006/09/07 Javascript
用YUI做了个标签浏览效果
2007/02/20 Javascript
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
javascript几个易错点记录
2014/11/26 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python网络编程实例简析
2014/09/26 Python
Python 性能优化技巧总结
2016/11/01 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
python redis 删除key脚本的实例
2019/02/19 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
医学院学生求职简历的自我评价
2013/10/24 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
党支部承诺书
2015/01/20 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL