Question

当我单击html输入表单中的“插入”按钮时，我想将HTML输入表单中的某些数据保存（存储）到DB.Json文件中！

这就是我拥有的HTML：

<table id="datatable" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>  
<th>Birthday</th>
<th>Action</th>
</tr>
</thead>
<tr>
<td><input type="text" name="first_name" id="first_name"></td>
<td><input type="text" name="last_name" id="last_name"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="birthday" id="birthday"></td>
<td><button type="button" onclick="insert1()">Insert</button></td>
</tr>

现在当我填写html索引上的所有字段并单击插入按钮时，需要将这些数据保存在json文件中

Answer 1

首先，将<tr>放在<tbody>内（这总是一个好习惯）。

现在就您的问题。您无法使用javascript创建单独的DB.json文件，但可以创建JSON对象并在其中存储值。

然后只需通过每次输入Json Object获取信息就可以构建id

function insert1() {
  myJson = {
    first_name: $("#datatable").find("#first_name").val(),
    last_name: $("#datatable").find("#last_name").val(),
    age: $("#datatable").find("#age").val(),
    birthday: $("#datatable").find("#birthday").val(),
  };
  
  console.log("myJson", myJson);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Age</th>  
      <th>Birthday</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="text" name="first_name" id="first_name"></td>
      <td><input type="text" name="last_name" id="last_name"></td>
      <td><input type="text" name="age" id="age"></td>
      <td><input type="text" name="birthday" id="birthday"></td>
      <td><button type="button" onclick="insert1()">Insert</button></td>
    </tr>
  </tbody>
</table>

Answer 2

您可以使用axios来写入json文件

简单地说，它是一个ajax包装器

axios.post("json file path", jsonObject).then(
  res => console.log(res); /// successfully writing in file
);

如何将输入字段HTML中的数据追加（存储）到Json文件

2 个答案: