检索超文本标记语言动态表单域数据并保存到MySQL数据库

<form id="myForm">
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  <input type="submit" value="提交">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交
  saveFormData(); // 调用保存表单数据的函数
});

function saveFormData() {
  var form = document.getElementById("myForm");
  var name = form.elements["name"].value;
  var email = form.elements["email"].value;

  var data = {
    name: name,
    email: email
  };

  // 使用AJAX发送数据到后端
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/saveFormData", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("表单数据保存成功");
    }
  };
  xhr.send(JSON.stringify(data));
}

const express = require("express");
const mysql = require("mysql");

const app = express();
const connection = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "password",
  database: "mydatabase"
});

app.use(express.json());

app.post("/saveFormData", (req, res) => {
  const { name, email } = req.body;

  const sql = "INSERT INTO users (name, email) VALUES (?, ?)";
  connection.query(sql, [name, email], (error, results) => {
    if (error) {
      console.error("保存表单数据失败", error);
      res.status(500).json({ error: "保存表单数据失败" });
    } else {
      console.log("表单数据保存成功");
      res.status(200).json({ message: "表单数据保存成功" });
    }
  });
});

app.listen(3000, () => {
  console.log("服务器已启动");
});