jQuery load方法用法集锦


Posted in Javascript onDecember 06, 2011

调用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 相关文章推荐
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 #Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 #Javascript
js Function类型
Dec 04 #Javascript
Javascript base64编码实现代码
Dec 02 #Javascript
JS获取页面窗口大小的代码解读
Dec 01 #Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 #Javascript
jQuery 中使用JSON的实现代码
Dec 01 #Javascript
You might like
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
jquery实现聊天机器人
2020/02/08 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
Python类定义和类继承详解
2015/05/08 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Python 中@property的用法详解
2020/01/15 Python
Python3开发环境搭建详细教程
2020/06/18 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
DTD的含义以及作用
2014/01/26 面试题
2015年酒店服务员工作总结
2015/05/18 职场文书
安全生产奖惩制度
2015/08/06 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
Docker下安装Oracle19c
2022/04/13 Servers