如何使用 JS 将元素从表单添加到 JSON 数组文件答案

【问题标题】：How to add an element to a JSON array file from a form using JS如何使用 JS 将元素从表单添加到 JSON 数组文件
【发布时间】：2018-10-31 23:19:19
【问题描述】：

我有这个 html 表单可以将数据添加到 json 数组文件中

<head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript" src="AddBook.js"></script>
    </head>
    <body>
        <form id="add">
            <input type="text" id="isbn" name="isbn">
            <br>
            <input type="text" id="title" name="title">
            <br>
            <input type="text" id="author" name="author">
            <br>
            <input type="text" id="issued" name="issued">
            <br>
            <input type="submit" name="submit">
        </form>
        <script>
                var x = document.getElementById("add");
                var isbn = x.elements[0].value;
                var title = x.elements[1].value;
                var author = x.elements[2].value;
                var issued = x.elements[3].value;
                write(isbn,title,author,issued);
        </script>

下面是 AddBook.js

function write(isbn, title, author, issued) {
  const fs = require(['fs'], function (fs){  
  const data = fs.readFileSync('js/book.json');
  let jsonStr = data.toString();
  const obj = JSON.parse(jsonStr);

  obj.books.push({
    isbn,
    title,
    author,
    issued,
  });
  jsonStr = JSON.stringify(obj);
  console.log(jsonStr);
  fs.truncate('js/book.json', 0, () => {
    fs.writeFile('js/book.json', jsonStr, (err) => {
      if (err) {
        throw new Error(`Error writing file: ${err}`);
      }
    });
  });
  });
}

问题是下面的脚本作为一个独立的文件工作，但一旦与 HTML 一起使用就停止工作。我怎样才能使这个脚本与表单一起工作

【问题讨论】：

浏览器中的 JavaScript 通常被限制访问文件系统。据我所知 - 除了在 nodejs 中使用后端或类似的东西之外，没有办法解决这个问题。
@fredrik 你认为我可以使用 php 做到这一点吗？但是我必须通知你 json 文件在服务器上
如果它在服务器上，在客户端的 HTML 中确实是不可能的。如果你有 PHP 并且知道如何使用它，那么可以这样做。

标签： javascript html node.js json backend

【解决方案1】：

尝试添加一个函数以在表单上的提交上运行。像这样的：

<head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript" src="AddBook.js"></script>
    <script>
        function writeToJSON(){
            var x = document.getElementById("add");
            var isbn = x.elements[0].value;
            var title = x.elements[1].value;
            var author = x.elements[2].value;
            var issued = x.elements[3].value;
            write(isbn,title,author,issued);
        }
    </script>
</head>
<body>
    <form id="add" onsubmit="writeToJSON()">
        <input type="text" id="isbn" name="isbn">
        <br>
        <input type="text" id="title" name="title">
        <br>
        <input type="text" id="author" name="author">
        <br>
        <input type="text" id="issued" name="issued">
        <br>
        <input type="submit" name="submit">
    </form>
</body>

【讨论】：