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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript制作简单分页插件
Sep 11 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
vuejs指令详解
Feb 07 Javascript
jQuery表单验证之密码确认
May 22 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
如何在PHP中使用数组
2020/06/09 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
使用js 设置url参数
2013/07/08 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
详细探究Python中的字典容器
2015/04/14 Python
python计算圆周率pi的方法
2015/07/11 Python
python清理子进程机制剖析
2017/11/23 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
C#笔试题集合
2013/06/21 面试题
社区端午节活动总结
2015/02/11 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
担保书怎么写 ?
2019/04/22 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android