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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
js arguments.callee的应用代码
May 07 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
Smarty变量用法详解
2016/05/11 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Node.js console控制台简单用法分析
2019/01/04 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python读取csv文件实例解析
2019/12/30 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
致百米运动员广播稿
2014/01/29 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
大学生毕业求职信
2014/06/12 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Python django中如何使用restful框架
2021/06/23 Python
Redis命令处理过程源码解析
2022/02/12 Redis