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

时间:2016-08-21 20:17:19

标签: javascript jquery html json

我希望在我的网页上完成某些操作后,将信息附加到json文件中。例如,当单击一个按钮时,我希望将来自我的textarea的信息添加到json“message”字段中。与姓名和电子邮件相同。我怎么能用JS / jQuery做到这一点?

1 个答案:

答案 0 :(得分: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对象,那么我们可以执行以下代码段...