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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
Vue如何实现变量表达式选择器
Feb 18 Vue.js
基于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
介绍几个array库的新函数 php
2006/12/29 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
React中的render何时执行过程
2018/04/13 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
17个Python小技巧分享
2015/01/23 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
个人自我鉴定写法
2013/11/30 职场文书
高中体育教学反思
2014/01/29 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
大专学生求职自荐信
2014/07/06 职场文书
庆国庆活动总结
2014/08/28 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
讲解MySQL增删改操作
2022/05/06 MySQL