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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
JS将unicode码转中文方法
May 08 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 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生成便于打印的网页
2006/10/09 PHP
PHP采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python OS模块常用函数说明
2015/05/23 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
django框架创建应用操作示例
2019/09/26 Python
Python 文件数据读写的具体实现
2020/01/24 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
安全环保演讲稿
2014/08/28 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2014年质量工作总结
2014/11/22 职场文书
放假通知格式
2015/04/14 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL