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基础知识之数据类型
Aug 06 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
js同源策略详解
May 21 Javascript
javascript数组去重小结
Mar 07 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
解决vue 退出动画无效的问题
2020/08/09 Javascript
python3爬取各类天气信息
2018/02/24 Python
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
python 消费 kafka 数据教程
2019/12/21 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
高级护理实习生自荐信
2013/09/28 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
意向书范文
2014/03/31 职场文书
大学新生入学教育方案
2014/05/16 职场文书
反对邪教标语
2014/06/30 职场文书
婚礼答谢词
2015/01/04 职场文书
复兴之路观后感
2015/06/02 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python