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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
ReactNative实现Toast的示例
Dec 31 Javascript
react中使用css的7中方式(最全总结)
Feb 11 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
页面加载完成后再执行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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php 中文处理函数集合
2008/08/27 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php生成html文件方法总结
2014/12/01 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
一端时间轮换的广告
2006/06/26 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python requests.post带head和body的实例
2019/01/02 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
python打开使用的方法
2019/09/30 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
什么是Python包的循环导入
2020/09/08 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
爱情检讨书大全
2014/01/21 职场文书
教师工作失职检讨书
2014/09/18 职场文书
农村党员对照检查材料
2014/09/24 职场文书