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 日历提醒系统( 兼容所有浏览器 )
Apr 07 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
vue.js的安装方法
May 12 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 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下escape解码函数的实现方法
2010/08/08 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
Python中splitlines()方法的使用简介
2015/05/20 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python导入模块交叉引用的方法
2019/01/19 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Python输出指定字符串的方法
2020/02/06 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
openCV提取图像中的矩形区域
2020/07/21 Python
python 线程的五个状态
2020/09/22 Python
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
业务员岗位职责
2013/11/16 职场文书
司仪主持词两篇
2014/03/22 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
中秋节慰问信
2015/02/15 职场文书
个人年终总结开头
2015/03/06 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Java无向树分析 实现最小高度树
2022/04/09 Javascript
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript