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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
bootstrap css样式之表单
Jan 19 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
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
pw的一个放后门的方法分析
2007/10/08 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
Python tkinter事件高级用法实例
2018/01/31 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
django云端留言板实例详解
2019/07/22 Python
Python shelve模块实现解析
2019/08/28 Python
Django框架models使用group by详解
2020/03/11 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
空字符串(“”)和null的区别
2012/11/13 面试题
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
正隆泰信息技术有限公司上机题
2012/06/14 面试题
股份合作协议书范本
2014/04/14 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js