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 相关文章推荐
jQuery 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
JSON相关知识汇总
Jul 03 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
layUI实现列表查询功能
Jul 27 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
element多个表单校验的实现
May 27 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/10/23 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
PHP内核探索之变量
2015/12/22 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
历史系自荐信范文
2013/12/24 职场文书
买卖车协议书
2014/04/21 职场文书
岗位职责说明书
2014/05/07 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
实习指导教师评语
2014/12/30 职场文书
青年志愿者活动感想
2015/08/07 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
Mysql开启外网访问
2022/05/15 MySQL