当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery Ajax之load()方法

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

No. « 154 155 156 157 »

技术文章搜索

关键字

Javascript 中的 jQuery Ajax之load()方法

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 457 ::
收藏到网摘: n/a

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是laod()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

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>

当按钮被单击后，出现如下图的界面：

　　
显然，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");
　　运行效果则如下图：

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）就被触发。