jquery中load方法的用法及注意事项说明


Posted in Javascript onFebruary 22, 2014

调用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类
Sep 08 Javascript
JavaScript中“+=”的应用
Feb 02 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
Vue 滚动行为的具体使用方法
Sep 13 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 #Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 #Javascript
文本框水印提示效果的简单实现代码
Feb 22 #Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 #Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
You might like
php图片的二进制转换实现方法
2014/12/15 PHP
PHP实现对png图像进行缩放的方法(支持透明背景)
2015/07/15 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
javascript 数组排序函数
2009/08/20 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python实现线程池代码分享
2015/06/21 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
医院实习接收函
2014/01/12 职场文书
论文致谢词范文
2015/05/14 职场文书
举起手来观后感
2015/06/09 职场文书
初中历史教学反思
2016/02/19 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
晚会开幕词范文
2016/03/04 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript