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 HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
Jun 02 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
Apr 17 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
ReactNative之FlatList的具体使用方法
Nov 29 Javascript
vue ssr 指南详读
Jun 29 Javascript
JavaScript中的各种宽高属性的实现
May 08 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
六查六看六改心得体会
2014/10/14 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
对Keras自带Loss Function的深入研究
2021/05/25 Python