Question

我对JQuery，JS和JSON很陌生

我正在尝试获取使用以下代码创建的基本保存文件：

<script>
var myObj, myJSON, text, obj;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
$.setJSON("testJSON", myJSON);

// Retrieving data:
text = $.getJSON("testJSON.json");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

我很确定$ .setJSON不存在，但找不到用于设置变量的内容。最终，我想设置循环并将文本区域中的文本保存在json文件中。

我知道这不是一件好事，我可能应该使用php和sql进行设置。但这只能由2个用户使用，并且不会同时使用。

任何帮助都会很棒。

Answer 1

关于文件操作，这是您可以做的。

提示用户下载

使用download属性和JSON的data-uri href创建锚点。

const data = { name: "John", age: 31, city: "New York" };
document.getElementById('download').addEventListener('click', () => {
  let dl = document.createElement('a')
  dl.download = 'test.json' // target filename
  dl.href = `data:application/json;charset=utf-8,${JSON.stringify(data)}`
  dl.click()
})

<button id="download" type="button">Save</button>

根据数据的大小，您可能会遇到URI长度问题，但是考虑到可以轻松地将数MB的图像base64编码为 data-uri ，我可能不会担心

允许用户上传文件

监听<input type="file">上的 input 或 change 事件并读取文件数据

document.getElementById('upload').addEventListener('input', e => {
  let file = e.currentTarget.files[0]
  let reader = new FileReader()
  reader.onload = e => {
    try {
      let obj = JSON.parse(e.target.result)
      
      // congrats, you now have an object from the file
      
      document.getElementById('out').textContent = JSON.stringify(obj, null, 2)
    } catch (err) {
      console.error('JSON parsing error', err.message)
    }
  }
  reader.onerror = e => {
    console.error('PANIC!', e)
  }
  reader.readAsText(file)
})

<dl>
<dt><label for="upload">Upload your <code>.json</code> file</label></dt>
<dd><input type="file" id="upload"></dd>
</dl>

<pre id="out"></pre>

此答案中省略了很多错误检查，因此建议您阅读使用FileReader API以获得更多详细信息。

Answer 2

您必须将.json文本解析为JavaScript。 JSON.parse()。然后，您可以获取属性。

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

Answer 3

除了其他

之外，JS将无法访问计算机

您应该（ 这不应该是存储json的另一种方式，因为js仍然无法通过文件夹访问 ）将您的json存储到localStorage.setItem(keytolaterretreive,yourJson)

稍后您可以检索它localStorage.getItem(keytolaterretreive)，这将返回您想要的json

示例：

myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("myJson",myJSON);
retreivedJson = localStorage.getItem("myJson");
console.log(retreivedJson);<-- your json will be consoled

有关localStorage

的更多信息

Answer 4

浏览器中的Javascript无法访问底层文件系统的API，因此您将无法通过这种方式保存JSON文件。您唯一能做的就是将用户数据聚合到一个Form中，然后通过AJAX将数据发布到服务器端API。

This文档应该可以帮助您了解FormData以及如何发送它。

如何将变量保存到JSON文件？

4 个答案:

提示用户下载

允许用户上传文件