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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
js事件触发操作实例分析
Jun 21 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 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 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
laravel入门知识点整理
2020/09/15 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python自动化生成IOS的图标
2018/11/13 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python设置环境变量的作用和实例
2019/07/09 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
医院标语大全
2014/06/23 职场文书
防灾减灾活动总结
2014/08/30 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
独生子女证明范本
2015/06/19 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技