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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
JavaScript队列结构Queue实现过程解析
2020/03/07 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
30年同学聚会邀请函
2014/01/25 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
企业授权委托书范本
2014/09/22 职场文书
外出考察学习心得体会
2016/01/18 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
Golang 并发编程 SingleFlight模式
2022/04/26 Golang