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学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
canvas绘制七巧板
Feb 03 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
详解JS数组Reduce()方法详解及高级技巧
Aug 18 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python让列表倒序输出的实例
2018/06/25 Python
使用Python 统计高频字数的方法
2019/01/31 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
外科实习自我鉴定
2013/10/06 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
大学生实训报告总结
2014/11/05 职场文书
大足石刻导游词
2015/02/02 职场文书
财务工作个人总结
2015/02/27 职场文书
详解JS数组方法
2021/11/20 Javascript