主页/jQuery教程/jQuery Ajax/jQuery 元素级Ajax：load() 方法

jQuery教程

jQuery 元素级Ajax：load() 方法

5,182字

22–33 分钟

概览

load() 方法是 jQuery 中一个独特且强大的 Ajax 工具，它将数据获取与内容插入合并在一个单一的操作中。与其他位于 $ 命名空间下的全局 Ajax 方法不同，load() 是一个作用于具体元素集合的实例方法。该方法向指定的 URL 发送请求，获取返回的 HTML 内容，并直接将其设置到匹配的元素内部，为动态加载页面片段提供了最简洁的实现方式。

基本用法：加载内容并插入

load() 方法的核心功能是从服务器加载 HTML 片段并将其插入到选中的 DOM 元素中。如果只需加载静态内容，这是最直接的 jQuery load() 应用。

语法

.load( url [, data ] [, complete ] )

url：一个字符串，包含发送请求的 URL。
data（可选）：一个对象或字符串，随请求发送到服务器的数据。如果提供了对象，请求将以 POST 方法发送；否则，默认为 GET 方法。
complete（可选）：一个回调函数，在请求完成（无论成功或失败）时执行。该函数接收三个参数：响应文本 (responseText)、状态文本 (textStatus) 和 jqXHR 对象。

示例：加载静态 HTML 片段

以下示例展示了如何使用 load() 方法将外部文件 content.html 中的内容加载到页面的一个 div 容器中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>load() 基础示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="loadContent">加载内容</button>
    <div id="result" style="border:1px solid #ccc; padding:15px; margin-top:15px; min-height:50px;">
        等待加载...
    </div>

    <script>
        $('#loadContent').on('click', function() {
            // 假设服务器上存在一个名为 'content.html' 的文件
            // 其中包含 <p><strong>动态加载的内容！</strong> 来自服务器。</p>
            $('#result').load('content.html');
        });
    </script>
</body>
</html>

在这个示例中，点击按钮后，load() 方法自动向 content.html 发起 GET 请求，并将服务器返回的 HTML 直接设置为 #result 元素的 innerHTML 内容。整个过程将 Ajax 请求与 DOM 操作无缝结合，这正是 jQuery load() 方法的简便之处。

选择器后缀：加载文档片段

load() 方法提供了一个非常实用的语法特性：可以在 URL 后附加一个 jQuery 选择器，用空格分隔。这允许从远程资源中仅加载与选择器匹配的部分内容，而不是整个文档。

语法

.load( url + " selector" [, data ] [, complete ] )

url + ” selector”：一个字符串，由 URL、一个空格和一个 jQuery 选择器表达式组成。jQuery 将获取整个文档，但只插入匹配该选择器的元素内容。

示例：从远程页面加载特定区域

以下示例展示了如何从一个完整的 HTML 页面中，仅提取并加载 #main 部分的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>load() 选择器后缀示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="loadPart">加载主要内容</button>
    <div id="sidebar" style="float:left; width:30%; background:#f0f0f0; padding:10px;">
        侧边栏（保持不变）
    </div>
    <div id="content" style="float:left; width:60%; border:1px solid #ccc; padding:10px; min-height:100px;">
        主内容区域（将被替换）
    </div>

    <script>
        $('#loadPart').on('click', function() {
            // 假设存在一个 'page.html' 文件，其结构包含一个 <div id="main">...</div>
            // 此操作将只加载 #main 内的 HTML，并放入当前页面的 #content 元素中
            $('#content').load('page.html #main');
        });
    </script>
</body>
</html>

通过这种简洁的语法，load() 方法避免了加载整个外部页面，仅提取所需片段。这在实现模态框内容、标签页或任何需要从现有页面复用特定区域时极为高效，是 jQuery load() 方法区别于其他 Ajax 便捷方法的关键特性。

发送数据：GET 与 POST 的选择

load() 方法根据 data 参数的类型决定使用 GET 还是 POST 方法。这一行为使得它可以灵活地处理不同类型的数据加载需求。

GET 请求：当 data 参数是一个字符串（如查询字符串）或省略时，load() 使用 HTTP GET 方法。URL 后可能附加查询字符串。
POST 请求：当 data 参数是一个普通的 JavaScript 对象（{ key: value }）时，load() 会自动切换到 HTTP POST 方法。这在发送较大数据集或需要修改服务器状态时非常有用。

示例：使用 POST 发送数据并加载结果

以下示例展示了如何通过 POST 方法发送表单数据，并加载服务器返回的筛选结果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>load() 发送数据示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="filterForm">
        <label>分类:
            <select name="category">
                <option value="books">书籍</option>
                <option value="electronics">电子产品</option>
            </select>
        </label>
        <label>关键词: <input type="text" name="keyword"></label>
        <button type="submit">筛选</button>
    </form>
    <div id="results" style="border:1px solid #aaa; padding:15px; margin-top:15px; min-height:100px;">
        筛选结果将显示在这里...
    </div>

    <script>
        $('#filterForm').on('submit', function(event) {
            event.preventDefault(); // 阻止表单提交

            // 将表单数据转换为对象，这将触发 load() 使用 POST 方法
            var formData = {
                category: $('select[name="category"]').val(),
                keyword: $('input[name="keyword"]').val()
            };

            // 向服务器发送 POST 请求，并将返回的 HTML 填入结果区域
            $('#results').load('/api/filter-products', formData);
        });
    </script>
</body>
</html>

在此示例中，由于向 load() 传递了一个对象作为 data 参数，请求将以 POST 方式发送。服务器可以根据这些数据进行处理，并返回一个 HTML 片段，该片段会被直接插入 #results 元素中。这种方式完美地将数据提交和内容更新融合在一个步骤里。

完成回调：处理加载后的操作

load() 方法的 complete 回调函数允许在请求完成（无论成功或失败）后执行额外的 JavaScript 代码。这对于需要在内容加载后绑定事件、初始化插件或显示状态信息等场景至关重要。

示例：加载完成后执行后续逻辑

以下示例展示了如何使用 complete 回调在动态加载的内容上附加事件处理程序。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>load() 回调示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>.active { background-color: yellow; }</style>
</head>
<body>
    <button id="loadComments">加载评论</button>
    <div id="comment-section" style="border:1px solid #ccc; padding:15px; margin-top:15px;">
        暂无评论。
    </div>

    <script>
        $('#loadComments').on('click', function() {
            $('#comment-section').load('comments.html', function(response, status, xhr) {
                if (status === 'success') {
                    // 内容加载成功后，为所有评论项绑定鼠标悬停效果
                    $('#comment-section .comment-item').on('mouseenter', function() {
                        $(this).addClass('active');
                    }).on('mouseleave', function() {
                        $(this).removeClass('active');
                    });
                    console.log('评论已加载并初始化完成。');
                } else if (status === 'error') {
                    $('#comment-section').html('<p style="color:red;">加载评论失败。</p>');
                }
            });
        });
    </script>
</body>
</html>

在这个例子中，complete 回调检查请求状态，如果成功，则遍历所有新加载的 comment-item 元素并为其绑定交互事件。这种模式确保了动态添加的内容也能获得预期的行为，是构建动态、可交互页面的常用技巧。response 和 status 参数可以用于调试或提供用户反馈，增强了对 jQuery load() 过程的控制力。

版本变更记录

版本	变更内容
1.0	引入 `.load()` 方法作为简单的 Ajax 内容加载工具。
1.2	增强了对选择器后缀的支持，允许加载文档片段。
1.5	`.load()` 方法开始返回 jqXHR 对象，但通常其链式调用仍以 jQuery 对象为主。其回调函数的参数和行为与核心 Ajax 方法保持一致。
3.0	内部实现与 Ajax 模块的更新保持同步，但方法本身的签名和行为保持稳定。

浏览器兼容性

由于 load() 方法本质上是 $.ajax() 的一个特化封装，其浏览器兼容性与 jQuery 的核心 Ajax 功能完全一致。它基于浏览器的 XMLHttpRequest (XHR) 对象工作，覆盖了几乎所有现代及历史浏览器。以下为 jQuery 核心所支持的最低浏览器版本。

浏览器	最低支持版本
Chrome	30+
Edge	12+
Firefox	25+
Opera	18+
Safari	7+
Chrome Android	30+
Firefox for Android	25+
Opera Android	18+
Safari on iOS	7+
Samsung Internet	4.0+
WebView Android	4.4+
WebView on iOS	7+

注：对于 IE6-8，jQuery 1.x 系列提供了基于 ActiveXObject 的兼容支持。jQuery 4.x 已放弃对 IE 10 及更早版本的支持，但仍兼容 IE11。load() 方法在所有受支持版本中均工作正常。

load() 方法以其独特的“获取并插入”模式，为处理 HTML 内容片段的动态加载提供了最简洁的解决方案。无论是加载静态文件、从复杂文档中提取特定区域，还是通过 POST 提交数据并更新页面，jQuery load() 都通过极简的语法和智能的默认行为，极大地简化了开发流程。它是构建动态、渐进增强式 Web 界面时，一个不可或缺的高效工具。

简介与入门

jQuery 选择器

DOM操作与遍历

HTML元素操作

动画与特效

事件处理

实用函数

回调、延迟与异步

jQuery Ajax

jQuery 插件

优化与实践

与现代前端开发

综合实战项目