如何从 Jquery & ajax 的响应下载 JSON 文件

Question

与此类似的问题：Download a file by jQuery.Ajax。

有我的代码：

    function saverequest(url, data) {
    var response = $.ajax({
        url: url,
        timeout: requestTimeout,
        global: false,
        cache: false,
        type: "POST",
        data: data,
        dataType: "json",
        success: function () {
            var blob = new Blob([response.data], {type : 'application/json'});
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "export.json";
            link.click();
        }
    });

    return response;
}

正如我在这张图片中看到的，服务器端响应正常 json 数据文件。

但是此代码保存 export.json 文件，其中包含“underfined”内容。

有一个问题：如何将response中的数据写入blob对象？

Answer 1

问题是因为您正在使用 response 变量，该变量保存从 $.ajax() 调用返回的 jqXHR 对象。此对象没有 data 属性，因此您会在输出中看到 undefined。

鉴于您正在使用的模式，您应该在 success 处理程序函数中定义一个参数，该函数接收请求中的 JSON 数据，然后改用它。试试这个：

function saverequest(url, data) {
  return $.ajax({
    url: url,
    timeout: requestTimeout,
    global: false,
    cache: false,
    type: "POST",
    data: data,
    dataType: "json",
    success: function(data) { // note 'data' here
      var blob = new Blob([data], {
        type: 'application/json'
      });
      var link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = "export.json";
      link.click();
    }
  });
}

另请注意，根据您需要支持的浏览器，您可能需要将 link 元素附加到 DOM 才能引发 click 事件.

Using this code I get [object Object] in the export.json file

这是因为 JSON 包含一个对象，而不是 Blob() 构造函数所期望的数组。要解决此问题，请将 href 中的数据作为纯文本提供：

// change the AJAX request to retrieve the JSON as text (without deserialisation)
dataType: 'text'

// amend the href of the link to use text instead of a Blob
link.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));

如何从 Jquery & ajax 的响应下载 JSON 文件

How to download JSON file from response by Jquery & ajax

javascript

ajax

jquery

file

save