jQuery load方法用法集锦_jquery

调用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");

时间: 2024-10-29 01:24:35

jQuery load方法用法集锦_jquery的相关文章

jQuery中ajax的load()方法用法实例_jquery

本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素.语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.c

jquery load方法用法详解

格式 load(url,data,function(response,status,xhr)) 如何使用data 1.加载一个php文件,该php文件不含传递参数  代码如下 复制代码 $("#myID").load("test.php"); //在id为#myID的元素里导入test.php运行后的结果2. 加载一个php文件,该php文件含有一个传递参数  代码如下 复制代码 $("#myID").load("test.php&qu

jQuery.holdReady()方法用法实例_jquery

本文实例讲述了jQuery.holdReady()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以暂停或者恢复jQuery.ready()事件.调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法. 可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件,当满足一定条件时,再通过将此方法的参数设置为false,一一解除延迟.方法一般用于动态脚本加载,知道脚本加载完成然后再通过将此方法的参数设置为

jQuery trigger()方法用法介绍_jquery

jQuery的trigger()方法用法介绍: 此方法可以触发匹配元素上指定类型的事件. 它具有两种语法格式,下面就分别做一下介绍. 语法结构一: 复制代码 代码如下: $(selector).trigger(event,[param1,param2,...]) 参数解析: 1.event:必需,规定匹配元素要触发的事件,可以是自定义事件,也可以是标准的事件. 2.param:可选,传递给事件处理函数的参数. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&

jQuery中each()方法用法实例_jquery

本文实例讲述了jQuery中each()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以以匹配元素集合中每一个元素作为上下文去执行一个函数. 当每次执行函数时,函数的执行环境都是一个匹配元素集合中不同的DOM元素,并且会将此元素在集合中索引传递给此函数,索引值是从0开始的.通过返回false可用于提早停止循环运行,返回true将继续执行函数,直到匹配元素中每一个元素都遍历完成. each()方法不同于jQuery.each()方法 .each()方法只能够遍历JQuery对象,而jQu

jquery中post方法用法实例_jquery

本文实例讲述了jquery中post方法的用法,分享给大家供大家参考.具体用法分析如下: 在使用jquery实现网站的异步交互时,常用的两个函数为get和post方法,get方法使用很简单,直接提交get请求即可,如果有参数,直接追加到url后面就行,但是使用post方法时,传递参数,需要和url分开写,使得传参变得麻烦了,不过这样做起来更安全一些,而且出现中文乱码的概率也要低一些(get方法传中文很多情况下会出现乱码现象),这里就详细介绍一下post是怎样传递参数的. 首先写一个html代码如

jQuery的text()方法用法分析_jquery

本文实例讲述了jQuery的text()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或者设置匹配元素的文本内容. 如需了解更多相关内容可参阅参考手册text()方法. 特别说明: HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染. 文本内容是先将内容中的HTML预定义字符转换成html字符实体,这样HTML标签就不会被渲染. text()方的使用: 用法一: 此方法不带参数时候,功能是取得所有匹配元素的文本内容,并且结果是由所有匹配元素包含的文本内容组合起来的文本.

jQuery中index()方法用法实例_jquery

本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值. 索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. 复制代码 代码如下: $(selector).index() 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo

jQuery中size()方法用法实例_jquery

本文实例讲述了jQuery中size()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以返回jQuery对象集合中元素的数目. size()方法的返回值与jQuery对象的length属性一致. 语法结构: 复制代码 代码如下: $(selector).size() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta na