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 相关文章推荐
一个网马的tips实现分析
Nov 28 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
教你一步步实现一个简易promise
Nov 02 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
深入探究Django中的Session与Cookie
2017/07/30 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python实现logistic分类算法代码
2020/02/28 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
给老师的道歉信
2014/01/11 职场文书
企业消防安全制度
2014/02/02 职场文书
工作会议方案
2014/05/21 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
《雷雨》教学反思
2016/02/20 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
mysql配置SSL证书登录的实现
2021/09/04 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL