如何通过jQuery和Ajax从响应中下载JSON文件？现有代码导出内容为undefined

问题原因 #

• success 回调未接收响应数据参数：$.ajax 返回的 jqXHR 对象没有直接的 data 属性存储响应结果，你代码中读取 response.data 自然拿到的是 undefined。
• 未做JSON序列化：你配置了 dataType: "json"，jQuery会自动把服务端返回的JSON字符串解析为JS对象，直接将JS对象传入Blob无法得到符合预期的JSON文件内容，需要先将JS对象序列化为JSON字符串。

修正后代码 #

function saverequest(url, data) {
    var response = $.ajax({
        url: url,
        timeout: requestTimeout,
        global: false,
        cache: false,
        type: "POST",
        data: data,
        dataType: "json",
        // 回调第一个参数即为服务端返回的解析后数据
        success: function (resData) {
            // 将JS对象序列化为格式化的JSON字符串后写入Blob
            var blob = new Blob([JSON.stringify(resData, null, 2)], {type : 'application/json'});
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "export.json";
            link.click();
            // 释放临时URL对象，避免内存泄漏
            window.URL.revokeObjectURL(link.href);
        }
    });

    return response;
}

补充说明 #

JSON.stringify 的后两个参数是用来格式化输出的JSON内容，添加缩进提升可读性，如果不需要格式化可以简化为 JSON.stringify(resData)。

内容的提问来源于stack exchange，提问作者hedw1q