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 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
Aug 12 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python学生管理系统代码实现
2020/04/05 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
如何使用Python调整图像大小
2020/09/26 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
财务管理职业生涯规划范文
2013/12/27 职场文书
不假外出检讨书
2014/01/27 职场文书
党员批评与自我批评
2014/02/12 职场文书
风险评估实施方案
2014/03/09 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers