Question

我有一个HTML表，它通过ajax调用读取并加载JSON文件，然后允许用户对该数据进行更改。

该程序完全用HTML和JavaScript / jQuery完成。

它已经完成了，我已经有了格式化为JSON的更改的输出，但我仍然需要找到一种方法来导出该输出并将其保存到文件中（这显然是你可以＆＃ 39;是否使用JavaScript - 安全原因？）或更新旧的。

所以我的问题是，完成这项工作最简单的方法是什么？

由于

Answer 1

您可以通过创建<a>并data URI触发下载来“创建”文件。

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:application/json;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

form * {
  display: block;
  margin: 10px;
}

<form onsubmit="download(this['name'].value, this['text'].value)">
  <input type="text" name="name" value="data.json">
  <textarea name="text">{
  "a": "b",
  "arr": [
    {
      "c": "d"
    },
    {
      "d": "e"
    }
  ]
}</textarea>
  <input type="submit" value="Download">
</form>

前一段时间找到了这个片段并从那时起就保存了它。

Answer 2

如果您不想弄乱服务器，您只需将数据作为文本显示给用户，也可以添加一个按钮进行快速复制。然后用户可以根据需要将其保存到文件中。

如果需要自动保存到文件，则必须：

将数据发送回服务器

如何：

// the code supposes that you have a variable `data` containing the JSON
var request = new XMLHttpRequest(),
    body = new FormData();
body.append('user_data', data);
// The url here points to a url with path according to the desired functionality on the server
request.open("POST", "http://yourwebsite/jsonHandle", true); 
request.send(body);

如果您在使用的浏览器中无法依靠FormData()，则可以执行以下操作：

request.send("user_data=" + data);

在这种情况下，我们使用post请求，以便将json数据保留在请求正文中，而不是在url中显示它。如果您不关心它 - 请使用get请求。

之后你有两个选择：

将结果文件作为回复发送
将文件保存到服务器并将用户重定向到该文件的路径（如果路径不是常量，您必须将其作为响应从服务器发回）一个新选项卡（用于类似文本的文件，如JSON）（例如 https://jquery.com/download/ JQuery提供的方式下载）

如果您选择第二个，请记住该文件将保留在服务器上，除非您将其删除。

Answer 3

将您的json发回服务器，然后让服务器将该文件公开为可通过链接，按钮等访问的附件。

导出HTML表并保存到.json文件

3 个答案: