主页/jQuery教程/jQuery Ajax/jQuery Ajax 便捷方法

jQuery教程

jQuery Ajax 便捷方法

5,952字

25–38 分钟

概览

jQuery Ajax 便捷方法是基于核心 $.ajax() 方法构建的一系列简化函数，旨在用最少的代码量完成最常见的异步请求任务。这些方法包括用于加载数据的 $.get() 和 $.post()、专门用于获取 JSON 数据的 $.getJSON()，以及用于动态加载并执行脚本的 $.getScript()。它们通过预设常见的配置项，使得执行 jQuery Ajax 操作变得更加直接和高效，是日常 jQuery交互 开发中不可或缺的工具。

$.get()：使用 HTTP GET 请求加载数据

$.get() 方法使用 HTTP GET 请求从服务器加载数据。这是执行简单数据检索的最常用方式。

语法

jQuery.get( url [, data ] [, success ] [, dataType ] )

url：包含请求发送到的 URL 的字符串。
data（可选）：一个对象或字符串，随请求一起发送到服务器的数据。
success（可选）：请求成功时执行的回调函数。函数接收三个参数：返回的数据、状态文本字符串、以及 jqXHR 对象。
dataType（可选）：从服务器期望返回的数据类型。默认为 jQuery 智能检测。常见值："xml"、"json"、"script"、"html"、"text"。

示例：获取并显示文本内容

以下示例展示了如何使用 $.get() 从服务器获取一段纯文本，并将其插入到页面元素中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.get() 示例 - 获取文本</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="loadText">加载欢迎语</button>
    <div id="message" style="border:1px solid #ccc; padding:10px; margin-top:10px;"></div>

    <script>
        $('#loadText').on('click', function() {
            var $msgDiv = $('#message');
            $msgDiv.text('加载中...');

            // 假设服务器上有一个 welcome.txt 文件，内容为 "Hello from jQuery!"
            $.get('welcome.txt', function(data) {
                $msgDiv.html('<strong>' + data + '</strong>');
            }).fail(function() {
                $msgDiv.text('请求失败。');
            });
        });
    </script>
</body>
</html>

在这个示例中，点击按钮后，$.get() 向 welcome.txt 发起一个 GET 请求。请求成功后，回调函数将返回的文本内容显示在 div 元素中。通过链式调用的 .fail() 方法可以处理可能发生的错误，这体现了现代 jQuery Ajax 编程中基于 Promise 的实践。

$.post()：使用 HTTP POST 请求发送数据

$.post() 方法使用 HTTP POST 请求从服务器加载数据。当需要发送大量数据或执行会改变服务器状态的操作（如表单提交）时，通常使用此方法。

语法

jQuery.post( url [, data ] [, success ] [, dataType ] )

其参数与 $.get() 完全一致。

示例：提交表单数据并处理返回的 JSON

以下示例展示了如何使用 $.post() 向服务器发送数据，并处理服务器返回的 JSON 响应。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.post() 示例 - 提交数据</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form id="loginForm">
        用户名: <input type="text" name="username" id="username"><br>
        密码: <input type="password" name="password" id="password"><br>
        <button type="submit">登录</button>
    </form>
    <div id="result"></div>

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

            var formData = {
                username: $('#username').val(),
                password: $('#password').val()
            };

            $.post('/api/login', formData, function(response) {
                // 假设服务器返回 { "success": true, "message": "登录成功" }
                if (response.success) {
                    $('#result').text(response.message).css('color', 'green');
                } else {
                    $('#result').text(response.message).css('color', 'red');
                }
            }, 'json').fail(function() {
                $('#result').text('请求失败，请稍后重试。').css('color', 'red');
            });
        });
    </script>
</body>
</html>

此示例演示了 jQuery Ajax 便捷方法在处理表单交互时的典型应用。$.post() 方法自动将 formData 对象转换为查询字符串并作为 POST 请求的主体发送。通过指定 dataType 为 "json"，jQuery 会自动解析服务器返回的 JSON 字符串，使得 response 参数可以直接作为对象使用。

$.getJSON()：加载 JSON 数据

$.getJSON() 是 $.get() 的一个特例，它将 dataType 自动设置为 "json"，用于从服务器加载 JSON 编码的数据。

语法

jQuery.getJSON( url [, data ] [, success ] )

参数与 $.get() 相同，但不包含 dataType 参数。

示例：获取并显示 GitHub 仓库信息

以下示例展示了如何使用 $.getJSON() 从公开的 API 获取 JSON 数据，并在页面上展示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.getJSON() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <button id="loadRepo">加载 jQuery 仓库信息</button>
    <div id="repo-info" style="border:1px solid #ccc; padding:10px; margin-top:10px;"></div>

    <script>
        $('#loadRepo').on('click', function() {
            var $infoDiv = $('#repo-info');
            $infoDiv.html('加载中...');

            $.getJSON('https://api.github.com/repos/jquery/jquery', function(data) {
                var html = '<h3>' + data.full_name + '</h3>' +
                           '<p>描述: ' + (data.description || '无') + '</p>' +
                           '<p>Star: ' + data.stargazers_count + ' | Fork: ' + data.forks_count + '</p>' +
                           '<p>最后更新: ' + new Date(data.updated_at).toLocaleDateString() + '</p>';
                $infoDiv.html(html);
            }).fail(function() {
                $infoDiv.html('<p style="color:red;">无法加载仓库信息。</p>');
            });
        });
    </script>
</body>
</html>

这个例子突出了 $.getJSON() 在消费 Web API 时的便利性。它直接处理 JSON 响应，无需手动解析，极大地简化了从远程源获取结构化数据的流程，是 jQuery Ajax 便捷方法中最常用的工具之一。

$.getScript()：加载并执行 JavaScript 文件

$.getScript() 方法使用 HTTP GET 请求从服务器加载一个 JavaScript 文件，然后执行该文件。

语法

jQuery.getScript( url [, success ] )

url：一个字符串，包含要加载的脚本文件的 URL。
success（可选）：一个回调函数，在脚本成功加载并执行后被调用。回调函数接收三个参数：脚本的文本内容、状态文本字符串、以及 jqXHR 对象。

示例：动态加载第三方库

以下示例展示了如何使用 $.getScript() 按需加载一个外部 JavaScript 库（例如一个简单的颜色转换库，这里用模拟数据代替），并在加载完成后使用其提供的功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>$.getScript() 示例</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>.box { width: 200px; height: 200px; background-color: #3498db; margin-top: 20px; }</style>
</head>
<body>
    <button id="changeColor">随机颜色</button>
    <div class="box"></div>

    <script>
        // 模拟一个外部脚本，提供一个将颜色名称转换为十六进制值的简单函数
        // 实际开发中，这个脚本可能托管在 CDN 上
        var mockScriptUrl = 'data:application/javascript,' + encodeURIComponent('function getRandomHexColor() { return "#" + Math.floor(Math.random()*16777215).toString(16); }');

        $('#changeColor').on('click', function() {
            var $box = $('.box');

            // 检查函数是否已存在，避免重复加载
            if (typeof getRandomHexColor !== 'function') {
                $.getScript(mockScriptUrl, function() {
                    // 脚本加载并执行成功后，调用其中定义的函数
                    $box.css('background-color', getRandomHexColor());
                }).fail(function() {
                    alert('无法加载颜色脚本，使用默认颜色。');
                    $box.css('background-color', '#e74c3c');
                });
            } else {
                $box.css('background-color', getRandomHexColor());
            }
        });
    </script>
</body>
</html>

此示例演示了 $.getScript() 的核心用途：按需获取远程 JavaScript 代码并立即执行。这在实现功能插件化、延迟加载非核心依赖或根据用户交互动态加载功能模块时非常有用，是增强 jQuery交互 的一种高级手段。

便捷方法对比

为了方便在实际开发中做出合适的选择，以下表格总结了上述四种 jQuery Ajax 便捷方法 的核心特性和典型应用场景。

方法	HTTP 方法	默认 dataType	典型用途
`$.get()`	GET	智能检测	从服务器获取数据，如 HTML 片段、纯文本。
`$.post()`	POST	智能检测	向服务器提交数据，如表单、更新请求。
`$.getJSON()`	GET	JSON	从服务器获取 JSON 格式的数据，如 API 响应。
`$.getScript()`	GET	Script	从服务器加载一个 JavaScript 文件并立即执行。

版本变更记录

版本	变更内容
1.0	引入 `jQuery.get()`、`jQuery.post()` 和 `jQuery.getScript()` 方法。
1.2	引入 `jQuery.getJSON()` 方法。
1.5	所有便捷方法开始返回 `jqXHR` 对象，实现了 Promise 接口，支持链式回调（如 `.done()`、`.fail()`、`.always()`）。
3.0	`success`、`error` 和 `complete` 回调选项被正式弃用，推荐使用 Promise 风格的方法（`.done()` 等）。
4.0	`jQuery.get()` 和 `jQuery.post()` 方法支持 `null` 作为成功回调参数。`jQuery.getJSON()` 的内部行为与核心 Ajax 模块的改进保持一致。

浏览器兼容性

这些便捷方法基于核心的 $.ajax() 实现，因此其浏览器兼容性与 $.ajax() 完全一致，覆盖了几乎所有现代及历史浏览器。以下为 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 的兼容支持，但现代开发中建议使用 polyfill 或升级用户浏览器。jQuery 4.x 已放弃对 IE 10 及更早版本的支持，但仍兼容 IE11。

jQuery Ajax 便捷方法 通过封装底层复杂的配置，提供了一套清晰、简洁的 API 来应对最常见的异步通信需求。无论是加载文本、提交表单、获取 JSON 数据还是动态执行脚本，这些方法都能以最少的代码量实现高效的 jQuery交互。它们是日常开发中快速实现 Ajax 功能的首选工具，也是构建现代动态 Web 应用的重要基石。

简介与入门

jQuery 选择器

DOM操作与遍历

HTML元素操作

动画与特效

事件处理

实用函数

回调、延迟与异步

jQuery Ajax

jQuery 插件

优化与实践

与现代前端开发

综合实战项目