jQuery load() 方法
load() 是 jQuery AJAX 中最直观的方法：它向服务器发起请求，并把返回的 HTML 内容直接插入被选元素中，几乎不用写回调逻辑，适合加载文章片段、弹窗内容、局部刷新区域等场景。
load() 基本语法
语法：$(selector).load(url, data, callback)，三个参数说明如下：
| 参数 | 说明 |
|---|---|
| url | 必需，要加载的服务器地址 |
| data | 可选，随请求发送的数据；传对象时请求自动转为 POST |
| callback | 可选，请求完成后的回调函数 |
默认情况下 load() 使用 GET 请求，不传 data 即可。
加载整个文件
下面点击按钮，把服务器上的 demo.txt 全部内容读入 #result 区域：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://example.com/jquery.min.js"></script>
<!-- 说明：https://example.com 为占位域名，实际使用请替换为本地 jquery.min.js 或官方 CDN -->
</head>
<body>
<button id="btn">加载文章</button>
<div id="result">原内容</div>
<script>
$(function () {
$("#btn").click(function () {
$("#result").load("demo.txt");
// 效果：#result 的内容被替换为 demo.txt 的全部内容
});
});
</script>
</body>
</html>
加载文件的某一片段
在 url 后加一个空格和"选择器"，就只取目标文件中匹配该选择器的部分，其余忽略：
// 只加载 demo.html 中 id 为 intro 的那一段
$("#result").load("demo.html #intro");
// 效果：#result 只显示 demo.html 里 #intro 元素的内容
// 写法：url + 空格 + 选择器，中间不能有其它字符
发送数据给服务器
第二个参数传入对象后，load() 会自动改用 POST 方式提交：
$("#result").load("search.php", { keyword: "jQuery", page: 2 });
// 效果：把 keyword、page 作为表单数据 POST 给 search.php，再插入返回结果
回调函数
回调可接收三个参数：responseTxt（返回内容）、statusTxt（状态字符串 success 或 error）、xhr（XMLHttpRequest 对象）：
$("#result").load("demo.txt", function (responseTxt, statusTxt, xhr) {
if (statusTxt === "success") {
console.log("加载成功，共 " + responseTxt.length + " 字");
// 输出：加载成功，共 N 字
} else {
console.log("错误：" + xhr.status + " " + xhr.statusText);
// 输出：错误：404 Not Found
}
});
使用注意
- load() 把 HTML 直接插入页面，只应加载可信内容，否则有 XSS（跨站脚本）风险；
- 结果会替换元素原有内容，需要追加请改用 $.get() 加 append()；
- 与其它 AJAX 方法一样受同源策略限制。
小结：load() 一句话就能完成"取 HTML 并插入页面"，最适合局部刷新。当要处理 JSON 数据或更灵活的请求时，请看下一节的 $.get() 与 $.post() 方法。