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 相关文章推荐
Javascript基础教程之比较操作符
Jan 18 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
js css自定义分页效果
Feb 24 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
通过实例讲解JS如何防抖动
Jun 15 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相当简单的分页类
2008/10/02 PHP
PHP面向对象概念
2011/11/06 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
Yii框架登录流程分析
2014/12/03 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
模拟select的代码
2011/10/19 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
新手简单了解vue
2019/05/29 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python装饰器用法示例小结
2018/02/11 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
投标人廉洁自律承诺书
2014/05/26 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2014年妇女工作总结
2014/12/06 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python