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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
纯js实现倒计时功能
Jan 06 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
vue+element实现表单校验功能
May 20 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
webpack external模块的具体使用
2018/03/10 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
Python中的zip函数使用示例
2015/01/29 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python面向对象类的继承实例详解
2018/06/27 Python
pymongo中group by的操作方法教程
2019/03/22 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python中uuid模块实例浅析
2020/12/29 Python
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
同学会感言
2015/07/30 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs