ajax json弹出下载

今天我们来讲一下如何使用 Ajax 和 JSON 弹出下载文件。

首先，我们需要在 HTML 文件中创建一个按钮，当用户点击按钮时，触发下载事件。按钮可以像这样：

<button id="downloadBtn">点击下载</button>

接下来，我们在 JavaScript 文件中使用 Ajax 和 JSON，以获取服务器上的文件数据。

function downloadFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET','/file.json',true);
  xhr.responseType = 'json';

  xhr.onload = function() {
    var fileContent = this.response;
    saveFile(fileContent);
  };

  xhr.send();
}

在上述代码中，我们创建了一个 XMLHttpRequest 对象，并使用 open() 方法指定了文件的 URL。我们还设置了 responseType 属性，以确保服务器返回的数据为 JSON 格式。

在 onload 回调函数中，我们获取了从服务器返回的文件内容，并传递给了另一个函数 saveFile()，以完成文件下载的操作。

下面是 saveFile() 函数的实现：

function saveFile(fileContent) {
  var data = JSON.stringify(fileContent);
  var blob = new Blob([data],{type: 'application/octet-stream'});

  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'file.txt';
  link.click();
}

在 saveFile() 函数中，我们使用 JSON.stringify() 方法将文件内容转换为字符串，并创建一个新 Blob 对象。然后，我们创建一个 a 标签，设置其 href 属性为 URL 对象，并指定其 download 属性为文件名。

最后，我们模拟点击了 a 标签，通过点击方式下载了该文件。

现在，当用户点击下载按钮时，将触发 downloadFile() 函数，该函数将以 Ajax 和 JSON 的方式从服务器获取文件内容，并完成文件下载的操作。这是一种非常简便和高效的文件下载方式。