jQuery如何使用Ajax获取JSON数据？示例代码与常见坑点详解

在前后端分离尚不普及的年代，jQuery的Ajax模块几乎是前端请求接口的标准答案。即使到了今天，大量老项目仍然依赖jQuery完成数据交互，而获取JSON数据又是其中最核心的场景。本文将从最基本的写法入手，逐步介绍$.ajax、$.get和$.getJSON三种方式的差异，并结合实际使用中容易翻车的地方做一次系统梳理。

一、三种获取JSON数据的写法与示例代码

jQuery提供了三个层次的方式请求JSON，从最通用的$.ajax，到简化版的$.get，再到专门为JSON设计的$.getJSON。三者本质上是同一个底层封装，只是参数暴露程度不同。先看最完整的$.ajax写法：

$.ajax({
    url: '/api/user/list',
    type: 'get',
    dataType: 'json',
    data: { page: 1, size: 10 },
    success: function (result) {
        // result 已经是解析好的 JavaScript 对象
        console.log(result);
        renderList(result.data);
    },
    error: function (xhr, status, err) {
        console.error('请求失败：', status, err);
    }
});

这里的dataType: 'json'非常关键。设置之后，jQuery会把服务端返回的字符串自动执行JSON.parse，success回调里拿到的直接是对象或数组，不需要再手动解析。如果漏写这个参数，jQuery会根据响应头Content-Type智能判断，一般情况下也能正确识别，但遇到服务端返回头不规范的情况就可能出错，所以建议显式声明。

$.get是$.ajax的简化版，参数按顺序传入，代码更短，适合简单场景：

$.get('/api/user/list', { page: 1 }, function (result) {
    console.log(result);
}, 'json');

最后这个参数就是dataType，四个参数的位置不能搞错。而$.getJSON则是把URL和dataType都固定死了的快捷方法，它的写法最短，还会自动在URL后追加一个时间戳参数来避免缓存问题：

$.getJSON('/api/user/1', function (data) {
    console.log('用户名：', data.name);
});

三个方法怎么选？个人建议：简单只读的GET请求用$.getJSON最省事；需要设置请求头、超时时间或者要发POST的，老老实实用$.ajax，它暴露的配置项最全，排查问题也最方便。

二、回调写法与延迟对象：success与done的区别

很多教程把success回调当作唯一讲法，实际上jQuery从1.5版本开始引入了Deferred延迟对象，推荐用链式写法处理请求结果。两种写法对比一下：

// 写法一：传统回调，1.5之前的经典风格
$.ajax({
    url: '/api/config',
    dataType: 'json',
    success: function (data) { console.log(data); },
    error: function (xhr) { console.log(xhr.status); }
});

// 写法二：延迟对象链式调用
$.ajax({ url: '/api/config', dataType: 'json' })
    .done(function (data) { console.log(data); })
    .fail(function (xhr) { console.log(xhr.status); })
    .always(function () { console.log('无论成败都执行'); });

延迟对象的优势不只是写法优雅。当需要等待多个请求全部完成后再统一处理时，可以用$.when把多个请求合并，这在回调风格里要靠手动维护计数器实现，非常繁琐：

var req1 = $.getJSON('/api/user');
var req2 = $.getJSON('/api/order');

$.when(req1, req2).done(function (userResult, orderResult) {
    // 注意：多参数时每个结果是一个数组，第一个元素才是数据
    var user = userResult[0];
    var order = orderResult[0];
    console.log(user.name, order.total);
}).fail(function () {
    alert('任意一个请求失败都会进入这里');
});

需要特别注意的是，$.when的回调参数结构与单个请求不同，这是新手最容易迷糊的点。另外，从jQuery 3.0开始，success、error、complete这三个回调配置项被标记为废弃，虽然还能用，但新代码建议统一采用done和fail写法，为将来升级留余地。

三、常见问题排查与注意事项

第一类问题：进了success但拿不到数据。最常见的原因是服务端返回的内容并不是合法JSON。比如PHP接口末尾多输出了一个空行或警告信息、返回了带BOM头的文件，都会让JSON.parse失败。判断方法很简单，打开浏览器开发者工具的Network面板，查看响应的原始内容，把多余输出删掉即可。

第二类问题：控制台直接报跨域错误。浏览器出于同源策略限制，页面域名和接口域名不一致时请求会被拦截，错误信息通常包含CORS字样。解决办法有两个方向：让后端在响应头里加上Access-Control-Allow-Origin字段；或者使用JSONP，即把dataType改成jsonp，这要求服务端配合返回函数调用格式的数据。JSONP只支持GET请求，且安全性较差，现在基本被CORS取代，了解即可。

第三类问题：缓存导致数据不更新。IE浏览器对GET请求有激进的缓存策略，服务器数据变了但页面拿到的还是旧数据。解决办法是把cache: false加到$.ajax配置里，jQuery会在URL上追加_=时间戳参数强制刷新。前面提到的$.getJSON默认就关闭了缓存，这也是它贴心的地方。

最后提一个工程化的建议：实际项目中不要把Ajax调用散落在各个页面里，最好封装一层统一的请求函数，集中处理错误提示、登录过期跳转、加载动画等通用逻辑。这样后端接口返回结构一旦调整，只需要改一处代码。示例如下：

function request(url, data) {
    return $.ajax({
        url: url,
        data: data || {},
        dataType: 'json',
        timeout: 10000
    }).fail(function (xhr) {
        if (xhr.status === 401) {
            location.href = '/login.html';
        } else {
            alert('请求异常，请稍后重试');
        }
    });
}

// 业务代码里直接调用
request('/api/user/list', { page: 1 }).done(function (res) {
    renderList(res.data);
});

总结一下：掌握$.ajax的完整配置是根本，$.get和$.getJSON只是便捷封装；success与done两种风格要看得懂，新代码优先用延迟对象；跨域、JSON格式不合法、缓存是三大高频坑点，遇到问题优先用Network面板看原始响应。把这些要点吃透，jQuery下的接口数据处理基本就不会再有障碍了。

jQuery AjaxjQuery获取JSONgetJSON修改时间：2026-09-15 10:26:37