jQuery get()方法：通过HTTP GET请求从服务器加载数据-代码号

在 jQuery 的 AJAX 方法体系中，$.get() 是发起 HTTP GET 请求最直接的方式。它的职责很单一——向指定的 URL 发送一个 GET 请求，将服务器返回的数据加载到页面中。由于 GET 请求是 HTTP 协议中最常见的请求方式之一，$.get() 也在各类前端项目中出场率很高。

这个方法本质上是对底层 $.ajax() 的封装。jQuery 团队把常用的配置项简化成了几个平铺的参数，让你不用每次都写一长串配置对象。在只需要“发请求、拿数据、做处理”的简单场景下，$.get() 用起来比完整版 $.ajax() 更快。

为什么我会在简单数据获取时选 .get()而不是.get()而不是.ajax()？

$.ajax() 功能，但配置项多，代码结构也会更臃肿。如果你的需求就是向某个接口发一个 GET 请求，拿到 JSON 或 HTML 数据后渲染到页面，$.get() 几个参数就已经覆盖了全部流程。代码越简短，出错的可能性也越低。只有当你需要设置请求头、处理错误回调、控制缓存行为等高级需求时，才需要搬出 $.ajax()。

语法

$.get(URL, data, function(data, status, xhr), dataType)

参数说明：

URL（必需）：请求发送的目标地址，字符串类型。这是四个参数里唯一不能省略的。
data（可选）：随请求一起发送给服务器的数据。可以是普通对象（会被转成查询字符串拼接到 URL 后面），也可以是字符串形式。
function(data, status, xhr)（可选）：请求成功后的回调函数。它自身也接收三个参数：
- data：服务器返回的响应数据。
- status：请求状态描述，如 "success"、"error" 等。
- xhr：底层的 XMLHttpRequest 对象，便于需要时直接操作原生请求对象。
dataType（可选）：预期从服务器返回的数据类型。可选值包括 "text"、"json"、"jsonp"、"html"、"script" 和 "xml"。如果不指定，jQuery 会尝试根据响应头自动判断。

课程知识要点

GET 请求的数据暴露在 URL 中：data 参数会被序列化为查询字符串附加到 URL 后面，因此不适合传递敏感信息（如密码），对感数据应该使用 POST 请求。
回调只在成功时执行：$.get() 的成功回调仅在服务器返回 2xx 状态码时触发。如果需要处理错误，可以用链式调用 .fail() 或改用 $.ajax()。
dataType 影响数据预处理：指定 "json" 时，jQuery 会自动把响应体解析为 JavaScript 对象；指定 "html" 时则保留为字符串。这个细节可能影响你后续对 data 的操作方式。
返回值为 jqXHR 对象：$.get() 返回一个 jqXHR 对象，支持链式调用 .done()、.fail() 和 .always()，实际上它是一个 Promise 兼容的接口。

示例：加载 HTML 内容并显示请求状态

下面的例子模拟了一个常见场景：点击按钮后，通过 $.get() 请求服务器上的一份 HTML 文件，将返回的内容插入页面，并同时显示请求状态。为了演示完整性，这里假设存在一个 course-info.html 文件作为目标资源。

被请求的文件 course-info.html：

<h1>编程学习指南</h1>
<h2>从零开始掌握前端开发</h2>
<p>更新时间：2026年</p>

发起请求的主页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>get() 方法示例 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h3>jQuery get() 方法——从服务器加载数据</h3>
    <p>点击下方按钮，加载课程信息：</p>
    <button>获取课程内容</button>
    <div id="content-area" style="margin-top:15px; padding:15px; border:1px solid #ccc;"></div>
    <p id="status-text"></p>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                // 使用 $.get() 发起 GET 请求
                $.get("course-info.html", function (data, status) {
                    // data 是服务器返回的 HTML 内容
                    $("#content-area").html(data);
                    // status 是请求状态
                    $("#status-text").text("请求状态: " + status);
                });
            });
        });
    </script>
</body>
</html>

点击按钮后，course-info.html 中的标题和段落会被加载并显示在页面中，同时下方会标注“请求状态: success”。整个过程只需几行代码，逻辑清晰，没有冗余配置。

个人经验与实用建议

在项目里，我曾经在一个后台管理系统中大量使用 $.get() 来加载各个模块的 HTML 片段。起初一切顺利，直到有一次服务器返回了 500 错误，页面却没有任何反馈。排查后发现，$.get() 默认不处理错误响应，错误被静默吞掉了。

这次经历让我形成一个习惯：始终为 $.get() 添加错误处理。你可以在后面链式调用 .fail() 方法来捕获异常，像这样：

$.get("course-info.html", function (data, status) {
    $("#content-area").html(data);
    $("#status-text").text("请求状态: " + status);
}).fail(function (xhr, errorType, errorMessage) {
    $("#status-text").text("请求失败: " + errorType + " - " + errorMessage);
});

如果接口返回的是 JSON 格式数据，记得显式指定 dataType 为 "json"。虽然 jQuery 会自动猜测，但显式声明可以避免因服务器返回的 Content-Type 不准确导致解析异常。这个参数省不了几行代码，却能减少低概率但难排查的潜在问题。

本文标签：

jQuery get()方法：通过HTTP GET请求从服务器加载数据

语法

课程知识要点

示例：加载 HTML 内容并显示请求状态

个人经验与实用建议

感谢您的认可和支持