jQuery Ajax：load()方法
主要参考：
《锋利的jQuery》单东林、张晓菲、魏然
www.3cschool.com.cn之《jQuery 参考手册 - Ajax》
搜集整理：sagahu@163.com
定义
load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
注释：还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。
语法
.load(url, data, callback)
请使用 selector 来定义要改变的 HTML 元素，使用 url 参数来指定数据的 web 地址。只有当您希望向服务器发送数据时，才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时，您才需要使用 callback 参数。
|
参数 |
说明 |
|
url |
必需。规定要将请求发送到哪个 URL。 |
|
data |
可选。规定连同请求发送到服务器的数据。发送至服务器的key/value数据会作为QueryString附加到请求url中。 |
|
callback的语法： function(response, status, xhr) |
可选。规定当请求完成时运行的回调函数，无论请求成功或失败。 回调函数参数： response - 包含来自请求的结果数据。 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror" 4种）。 xhr - 包含 XMLHttpRequest 对象。 |
|
返回值 |
jQuery |
详细说明
load() 方法是jQuery 中最为简单和常用的方法。它几乎与 $.get(url, data, success) 等价，不同的是它不是全局函数，并且它拥有隐式的回调函数。当侦测到成功的响应时（比如，当 status 为 "success" 或 "notmodified" 时），load() 将匹配元素的 HTML 内容设置为返回的数据。这意味着该方法的大多数使用会非常简单：
$("#div1").load("ajax/test.html");
如果提供回调函数，则会在执行 post-processing 之后执行该函数：
$("#div1").load("ajax/test.html", function() {
alert("Load was performed.");
});
上面的两个例子中，如果当前文档不包含 "div1" ID，则不会执行 .load() 方法。
注意：在load() 方法中，无论Ajax请求是否成功，只要当请求完成（complete）后，回调（callback）函数就被触发。对应$.ajax()方法中的complete回调函数。
详细说明：url参数与加载页面片断
注意：在url 参数上，load() 方法与 $.get() 不同，前者允许我们规定要插入的远程文档的某个部分。
load() 方法允许加载页面片断，这一点是通过 url 参数的特殊语法实现的。其语法格式为："url selector"，注意url和选择器之间有一个空格。或者说，如果该url参数字符串中包含一个或多个空格，紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。
我们可以修改上面的例子，这样就可以使用所获得文档的某部分：
$("#div1").load("ajax/test.html #container");
如果执行该方法，则会取回 ajax/test.html 的内容，不过然后，jQuery 会解析被返回的文档，来查找带有“#container” ID 的元素。该元素，连同其内容，会被插入带有“#div1” ID 的元素中，所取回文档的其余部分会被丢弃。
注意：jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，比如 <html>, <title> 或 <head> 元素。结果是，由 load() 取回的元素可能与由浏览器直接取回的文档不完全相同。
注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据。
详细说明：data参数与传递方式
load()方法的传递方式是根据参数data来自动指定。如果没有参数传递，则采用HTTP GET方式传递；反之，则会自动转换为HTTP POST方式。
如何使用data参数发送数据的示例一
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keyup(function(){
txt=$("input").val();
$("span").load("/jquery/gethint.asp", {suggest:txt});
});
});
</script>
</head>
<body>
<p>请在下面的输入框中输入名字（a 到 z 的字符）：</p>
名字：<input type="text" />
<p>建议：<span></span></p>
<p>注释：我们在 <a href="/ajax/ajax_asp_php.asp" target="_blank">AJAX 教程</a> 中讲解过本例中使用的文件（gethint.asp）。</p>
</body>
</html>
如何使用data参数发送数据的示例二
// 无参数传递，是GET方式
$("div1").load("test.php", function(){
//...
});
// 有参数传递，则是POST方式
// 无参数传递，是GET方式
$("div1").load("test.php", {name:"rain", age:"22"}, function(){
//...
});
如何使用回调函数的参数来处理返回的数据的示例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").load("/example/xmle/cd_catalog.xml", function(response, status){
if (status=="success")
{
$("div").html("<ol></ol>");
$(response).find("artist").each(function(){
var item_text = $(this).text();
$('<li></li>').html(item_text).appendTo('ol');
});
alert("There are "+$(response).find("cd").size()+" CDs")
}
});
});
});
</script>
</head>
<body>
<p>Artists</p>
<div></div>
<button>获得 CD 信息</button>
<p>本例中使用的 XML 文件是 <a href="/example/xmle/cd_catalog.xml" target="_blank">cd_catalog</a></p>
</body>
</html>
如何使用回调函数的XMLHttpRequest 参数来处理AJAX 请求中的错误
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").load("wrongname.xml", function(response, status, xhr){
if (status=="success")
{
$("div").html("<ol></ol>");
$(response).find("artist").each(function(){
var item_text = $(this).text();
$('<li></li>').html(item_text).appendTo('ol');
});
}
else
{
$("div").html("An error occured: <br/>" + xhr.status + " " + xhr.statusText)
}
});
});
});
</script>
</head>
<body>
<p>Artists</p>
<div></div>
<button>获得 CD 信息</button>
<p>本例中使用的 XML 文件是 <a href="/example/xmle/cd_catalog.xml" target="_blank">cd_catalog</a></p>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述