jQuery Ajax之load()方法


Posted in Javascript onOctober 12, 2009

load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入到DOM中。它的语法结构为:

load( url [, data][, callback] )

load()方法参数解释见下表:

参数名称 类 型 说明
url String 请求HTML页面的URL地址
data(可选) Object 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败

1、 载入HTML文档
首先创建一个名为test.html的HTML文件,为后台Ajax载入做准备。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
</head> 
<body> <div class="comment"> 
    已有评论: 
</div> 
<div class="comment"> 
    <h6>张三:</h6> 
    <p class="para">沙发。</p> 
</div> 
<div class="comment"> 
    <h6>李四:</h6> 
    <p class="para">板凳。</p> 
</div> 
<div class="comment"> 
    <h6>王五:</h6> 
    <p class="para">地板。</p> 
</div> 
</body> 
</html>

然后新建一个空白页面,在上面添加两个元素:<button>按钮用来触发Ajax事件,id为“resText”的元素用来显示追加的HTML内容。接下来就是编写jQuery代码了。等DOM元素加载完毕,通过单击id为“send”的按钮来调用laod()方法,然后将test.html的内容加载到id为“resText”的元素里。那么代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="/jquery-1.3.2.js" ></script> 
</head> 
<body> <input type="button" id="send" value="Ajax获取" /> 
<div id="resText"></div> 
<script type="text/javascript"><!-- 
$(document).ready(function(){ 
    $("#send").click(function(){ 
        $("#resText").load("test.html"); 
    }); 
}); 
// --></script> 
</body> 
</html>

当按钮被单击后,出现如下图的界面:

jQuery Ajax之load()方法
显然,load()方法完成了原本很繁琐的工作。开发人员只需要使用jQuery选择器为HTML片段指定目标位置,然后将要加载的文件的URL作为参数传递给load()方法即可。
2、 筛选载入的HTML文档

上个例子是将test.html页面的内容都加载到id为“resText”的元素里。如果只需要加载test.html页面内的某些元素,那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符,可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为:“url selector”。注意,URL和选择器之间有一个空格。

例如只需要加载test.html页面中class为“para”的内容,可以使用以下代码来完成:

$("#resText").load("test.html .para");

运行效果则如下图:

jQuery Ajax之load()方法
3、 传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数传递,则采用GET方式传递;反之,则自动转换为POST方式。

//无参数传递,则是GET方式 
$("#resText").load("test.php",function(){ 
//...... 
}); 
//有参数传递,则是POST方式 
$("#resText").load("test.php",{name:"xht555",age:"24"},function(){ 
//...... 
});

4、 回调参数

对于必须在加载完成后才能继续的操作,load()方法提供了回调函数(callback),该函数有三个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,jQuery代码如下:

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){ 
//responseText:请求返回的内容 
//textStatus:请求状态:success、error、notmodified、timeout这4种 
//XMLHttpRequest:XMLHttpRequest对象 
});

注意:在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发。

Javascript 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 #Javascript
JS 文件本身编码转换 图文教程
Oct 12 #Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 #Javascript
jquery select选中的一个小问题
Oct 11 #Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 #Javascript
jquery 框架使用教程 AJAX篇
Oct 11 #Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 #Javascript
You might like
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
2014/11/23 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
机器学习python实战之决策树
2017/11/01 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python项目跨域问题解决方案
2020/06/22 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
师范毕业生自我鉴定
2014/01/15 职场文书
家长评语大全
2014/01/22 职场文书
国家助学金获奖感言
2014/01/31 职场文书
大学班级干部的自我评价分享
2014/02/10 职场文书
目标责任书范文
2014/04/14 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
初中重阳节活动总结
2015/05/05 职场文书
高中生物教学反思
2016/02/20 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
JUnit5常用注解的使用
2021/07/02 Java/Android
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB