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的Eval函数
Jul 26 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
js表单验证实例讲解
Mar 31 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
浅谈React高阶组件
Mar 28 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
js实现页面图片消除效果
Mar 24 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JS调用打印机功能简单示例
2016/11/28 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python斐波那契数列的计算方法
2018/09/27 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python实现猜单词游戏
2020/05/22 Python
Python字典dict常用方法函数实例
2020/11/09 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
幼儿园中班新学期寄语
2014/01/18 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书