如何用Fetch JS向SQL数据库传数据？Node.js Todo应用求助

一、修复前端Fetch提交数据的错误 #

你的NewBox函数里的Fetch调用存在两个关键问题：

1. method: post需改为字符串"POST"，否则会因post未定义抛出错误
2. 未传递任务名称给后端，后端/checkbox POST接口需要接收name参数

修改后的Fetch代码：

fetch("/checkbox", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: textfield })
})
.then(res => res.text())
.then(data => console.log(data))
.catch(err => console.error(err));

二、页面加载时从数据库渲染已有复选框 #

要实现刷新页面保留状态，需在页面加载时请求后端数据，动态生成复选框。添加初始化函数：

window.addEventListener('load', function() {
  fetch("/checkbox")
  .then(res => res.json())
  .then(items => {
    const div = document.getElementById("checkBoxes");
    items.forEach(item => {
      // 创建复选框
      let checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.id = `task-${item.id}`; // 用数据库唯一ID作为标识，避免名称重复冲突
      checkbox.dataset.id = item.id; // 存储数据库ID，方便后续操作

      // 创建标签
      let label = document.createElement("label");
      label.htmlFor = `task-${item.id}`;
      label.appendChild(document.createTextNode(item.name));

      // 创建换行
      let br = document.createElement("br");

      // 添加删除事件（先调用后端接口再删DOM）
      checkbox.addEventListener("click", () => {
        fetch(`/checkbox/${item.id}`, { method: "DELETE" })
        .then(() => {
          checkbox.remove();
          label.remove();
          br.remove();
        })
        .catch(err => console.error(err));
      });

      // 挂载到页面
      div.appendChild(checkbox);
      div.appendChild(label);
      div.appendChild(br);
    });
  })
  .catch(err => console.error(err));
});

三、修复服务器端删除接口的错误 #

你的服务器DELETE /checkbox/:id接口错误调用了updateitem，需改为deleteitem：

app.delete("/checkbox/:id", (req, res) => {
  deleteitem(req.params.id, (err) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.status(200).send("deleted");
    }
  });
});

四、添加复选框勾选状态保存功能（核心需求） #

要保留复选框的勾选状态，需修改数据库表结构并补充对应逻辑：

1. 更新数据库建表语句，添加checked字段：

db.run(
  "CREATE TABLE IF NOT EXISTS checkbox (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, checked BOOLEAN DEFAULT 0)",
  (err) => {
    if (err) {
      console.log(err.message);
    } else {
      console.log("table created");
    }
  }
);

2. 修改后端PUT接口，支持更新勾选状态：

app.put("/checkbox/:id", (req, res) => {
  const { name, checked } = req.body;
  let sql, params;
  // 根据传入参数选择更新逻辑
  if (checked !== undefined) {
    sql = "UPDATE checkbox SET checked=? WHERE id=?";
    params = [checked, req.params.id];
  } else if (name) {
    sql = "UPDATE checkbox SET name=? WHERE id=?";
    params = [name, req.params.id];
  }
  db.run(sql, params, (err) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.status(200).send("updated");
    }
  });
});

3. 前端添加状态监听，同步到数据库：

// 在初始化创建复选框时补充状态设置和监听
checkbox.checked = item.checked === 1; // 数据库中0为未勾选，1为勾选
checkbox.addEventListener("change", () => {
  fetch(`/checkbox/${item.id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ checked: checkbox.checked ? 1 : 0 })
  })
  .catch(err => console.error(err));
});

五、其他优化建议 #

• 避免用任务名称作为DOM元素ID，改用数据库唯一ID（如task-${item.id}）防止重复冲突
• 给前端输入框添加非空校验，避免提交空任务
• 为所有Fetch请求添加错误捕获，方便调试排查问题

内容的提问来源于stack exchange，提问作者Максим Циганський