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之日期选择器的深入解析
Jun 19 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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
聊天室php&amp;mysql(一)
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JS控制一个DIV层在指定时间内消失的方法
2014/02/17 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
Python实现的redis分布式锁功能示例
2018/05/29 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python中entry用法讲解
2020/12/04 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
2014年父亲节活动方案
2014/03/06 职场文书
采购求职信
2014/03/17 职场文书
法定代表人证明书
2014/11/28 职场文书
学校教学管理制度
2015/08/06 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP