我对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个用户使用,并且不会同时使用。
任何帮助都会很棒。
关于文件操作,您可以执行以下操作。
使用JSONdownload
属性和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的image进行base64编码到data-uri中,我可能不会担心。
侦听上的输入或更改事件<input type="file">
并读取文件数据
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以获得更多详细信息。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句