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 相关文章推荐
innerText 使用示例
Jan 23 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
axios 封装上传文件的请求方法
Sep 26 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 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
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
如何写自我鉴定
2014/03/19 职场文书
管理标语大全
2014/06/24 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
Python3 类型标注支持操作
2021/06/02 Python