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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 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
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
一个计算身份证号码校验位的Python小程序
2014/08/15 Python
Python中的闭包总结
2014/09/18 Python
使用python为mysql实现restful接口
2018/01/05 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
new修饰符是起什么作用
2015/06/28 面试题
银行开业庆典方案
2014/02/06 职场文书
医疗纠纷协议书
2014/04/16 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
部队个人年终总结
2015/03/02 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
解析Java中的static关键字
2021/06/14 Java/Android
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python