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 表单的友好用户体现
Jan 07 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 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 mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php微信开发自定义菜单
2016/08/27 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python与R语言的简要对比
2017/11/14 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python列表操作方法详解
2020/02/09 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python集合的新增元素方法整理
2020/12/07 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
心理健康教育心得体会
2013/12/29 职场文书
中考冲刺决心书
2014/03/11 职场文书
留守儿童工作方案
2014/06/02 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
导游词之广西漓江
2019/11/02 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技