如何使用jQuery请求数据?jQuery实现Ajax请求及三种常用Ajax方法详解,从安装到实战全流程讲解

想用jQuery请求数据，核心就是使用它封装的Ajax系列方法。jQuery将原生XMLHttpRequest的创建、状态监听、响应解析和异常处理封装成统一接口，不必再手写readystatechange判断，也无需关心不同浏览器对XMLHttpRequest的差异。下面从引入库开始，结合代码说明每一种请求方式的细节。

一、引入jQuery：本地文件与CDN怎么选

使用jQuery请求数据之前，需要先把jQuery库加载到页面中。常见做法有两种：一是从官网下载jquery-3.6.0.min.js放入项目目录，再通过相对路径引入；二是直接使用官方CDN地址，如https://code.jquery.com/jquery-3.6.0.min.js。CDN方式可以借助公共缓存提高加载速度，但如果内网环境无法访问外网，则建议下载到本地并通过项目静态资源目录引入。

引入脚本时建议放在页面底部，或者使用defer属性，让DOM加载完成后再执行脚本。否则脚本中如果提前查找DOM元素，可能会因为元素尚未渲染而返回空对象。HTML结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery Ajax示例</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="username" name="username">
        <button type="submit">提交</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

这里把jQuery放在底部，后面的app.js中就可以安全使用$符号。即使使用其他框架，也建议用独立的命名空间避免冲突，例如noConflict。

二、$.ajax核心方法：参数与回调执行顺序

$.ajax是jQuery所有Ajax方法的基础，$.get和$.post内部最终都会调用它。掌握$.ajax的参数基本就能处理大部分请求场景。最常用的参数包括url、type或method、data、dataType、contentType、timeout、beforeSend、success、error和complete。其中url是请求地址，type或method用于指定GET或POST，data是要发送到服务器的数据，dataType表示预期服务器返回的数据类型，常见取值有json、xml、html和text。

一个完整的$.ajax请求通常会定义success和error两个回调。success在服务器返回2xx状态码且解析成功时触发，error在请求失败或解析出错时触发。complete无论成功失败都会执行，适合关闭loading状态。beforeSend会在请求发出前执行，常用于设置自定义请求头或显示加载动画。以下代码展示了这些参数的组合使用：

$.ajax({
    url: '/api/user/info',
    method: 'GET',
    data: { id: 18 },
    dataType: 'json',
    timeout: 5000,
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        $('#loading').show();
    },
    success: function(res) {
        console.log('用户数据：', res);
    },
    error: function(xhr, status, error) {
        console.log('请求失败，状态：' + status);
    },
    complete: function() {
        $('#loading').hide();
    }
});

dataType设置为json时，jQuery会尝试把响应文本转换成JavaScript对象。如果后端返回的字符串不是合法JSON，success不会触发，error会执行。开发时若遇到回调没有执行，可以先打开浏览器开发者工具的Network面板，查看响应状态码和实际返回内容，确认接口是否返回了200以及Content-Type是否匹配。

三、$.get、$.post、$.getJSON三种快捷方法

对于常规的查询和提交操作，jQuery提供了三个快捷方法。$.get用于发送GET请求，语法为$.get(url, data, callback, dataType)；$.post用于发送POST请求，语法为$.post(url, data, callback, dataType)；$.getJSON用于发送GET请求并自动将响应解析为JSON对象。它们的参数中，data和callback都可以省略，dataType在不传时通常由响应Content-Type决定。

这三个方法使用起来比$.ajax更简洁，但也失去了一些控制能力，例如不能直接设置timeout和自定义请求头。如果需要处理超时或全局错误，仍然建议使用$.ajax。下面分别给出典型应用示例：

// 1. 查询用户列表，携带查询参数
$.get('/api/users', { page: 1, size: 10 }, function(res) {
    console.log(res.list);
}, 'json');

// 2. 提交登录表单
$.post('/api/login', { username: 'admin', password: '123456' }, function(res) {
    if (res.code === 0) {
        console.log('登录成功');
    }
}, 'json');

// 3. 获取JSON数据并直接得到对象
$.getJSON('/api/config', function(config) {
    console.log(config.theme, config.language);
});

$.get和$.getJSON发送GET请求时，浏览器可能会缓存响应。对于实时数据接口，可以在url后追加时间戳，或者改用$.ajax设置cache为false。$.post默认contentType是application/x-www-form-urlencoded，与普通表单提交一致。如果后端要求JSON格式，需要使用$.ajax并设置contentType为application/json，同时用JSON.stringify把数据转成字符串。

四、实战：异步提交表单并处理错误

日常开发中，表单异步提交是jQuery Ajax最典型的场景。点击提交按钮后，先阻止浏览器默认刷新行为，再序列化表单数据，通过$.post把数据发送到服务器。提交过程中可以禁用按钮防止重复点击，收到响应后根据业务码显示提示信息。下面是一个包含校验和错误提示的完整示例。

HTML结构已经在前面的引入部分给出，这里直接看交互脚本：

$(function() {
    $('#userForm').on('submit', function(e) {
        e.preventDefault();

        var username = $.trim($('#username').val());
        if (username === '') {
            alert('用户名不能为空');
            return;
        }

        var $btn = $(this).find('button');
        $btn.prop('disabled', true).text('提交中...');

        $.ajax({
            url: '/api/user/save',
            method: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            timeout: 8000
        })
        .done(function(res) {
            if (res.code === 0) {
                alert('保存成功');
            } else {
                alert('保存失败：' + res.message);
            }
        })
        .fail(function(xhr) {
            if (xhr.status === 401) {
                alert('登录已过期，请重新登录');
            } else {
                alert('网络异常或服务器错误');
            }
        })
        .always(function() {
            $btn.prop('disabled', false).text('提交');
        });
    });
});

上面的代码使用了done、fail和always三个链式方法，它们对应$.ajax返回的jqXHR对象。done表示成功回调，fail表示失败回调，always表示无论成功失败都会执行。与在$.ajax参数中写success和error相比，链式写法可以让请求逻辑更清晰，也方便复用同一个jqXHR对象。

处理错误时不能只看error回调和fail，服务器返回的HTTP状态码也很重要。例如401代表未授权，403代表无权限，404代表接口不存在，500代表服务器内部错误。实际项目中可以把这些状态码统一封装成提示函数，避免每个请求都重复判断。

五、跨域、缓存与调试常见问题

使用jQuery请求数据时，如果前端页面和后端接口不在同一个域名或端口下，浏览器会触发同源策略，导致请求无法发送或响应被拦截。jQuery本身不能绕过浏览器的同源限制，解决方案通常是后端接口开启CORS，返回Access-Control-Allow-Origin响应头。对于只支持GET的跨域接口，也可以使用$.ajax的dataType设置为jsonp，但jsonp只支持GET且要求后端返回JSONP格式，目前新项目已较少使用。

另一个容易遇到的问题是大写敏感的参数名与dataType不匹配。例如后端返回的是普通文本，却把dataType设置成json，jQuery解析时会失败。类似地，如果设置了contentType但后端不接受该格式，请求可能会变成预检请求，增加一次OPTIONS请求。调试时优先确认请求头、响应头以及实际返回内容，比直接修改代码尝试更高效。

对于GET请求的缓存问题，如果不希望浏览器使用缓存结果，可以在$.ajax中设置cache为false，jQuery会为URL追加一个下划线参数。也可以自己动手加时间戳，例如url: '/api/news?t=' + Date.now()。需要注意的是，这种方法只对GET请求有效，POST请求通常不会被缓存。

最后，如果页面中使用了多个独立的Ajax请求，不建议大量使用$.ajaxSetup做全局配置。它虽然能统一设置默认参数，但会让不同请求之间产生隐式依赖，排查问题时反而更困难。更推荐封装一个项目自己的请求函数，在函数内部处理token、超时、错误状态码和统一提示，外部只传入具体参数。

jQuery Ajax$.ajax异步请求修改时间：2026-09-20 03:00:52