javascript - 将用户添加到网页后获取的数据生成 json 文件

Question

当我的网页上完成某些操作时，我想将信息附加到 json 文件中。例如，当单击按钮时，我希望将文本区域中的信息添加到 json“消息”字段中。姓名和电子邮件也是如此。我怎样才能使用 JS/jQuery 做到这一点？

Answer 1

var info = {};
showJSON();

function generateNewData(attribute) {
  info[attribute] = $('#' + attribute).val();
  showJSON();
}

function showJSON() {
  $('#json').html(
    JSON.stringify(info, null, 2)
  );
}

function downloadJSON() {
  saveData(info, 'my-json-filename.json');
}

function saveData(data, fileName) {
    let a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
  
    let json = JSON.stringify(data, null, 2), // remove ', null, 2' if you don't want indentation
        blob = new Blob([json], { type: "octet/stream" }),
        url = window.URL.createObjectURL(blob);
  
    a.href = url;
    a.download = fileName;
    a.click();
    window.URL.revokeObjectURL(url);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='text' id='name' onkeypress='generateNewData("name")'/>
<br />
<input type='email' id='email' onkeypress='generateNewData("email")'/>
<br />
<textarea id='message' onkeypress='generateNewData("message")'></textarea>



<pre id='json'></pre>

<button onClick='downloadJSON();'>Download JSON</button>

例如，如果我们想在用户写入任何新内容后生成一个 JSON 对象，那么我们可以执行以下代码片段...