如何用JS连接现有数据库至网页？按钮绑定无响应求助

核心问题 #

• 浏览器端JS无法直接调用Node.js的sqlite3模块，这是绑定按钮无反应的根本原因——前端环境不支持require语法和SQLite的Node.js驱动。
• 现有JS代码是启动时直接执行插入，没有绑定到按钮点击事件；表单默认提交会刷新页面，导致逻辑中断。
• SQL语句存在表名不一致：创建的表是userData，但插入语句写的是users，单独运行时也会报错。

解决方案（Node.js后端 + 前端AJAX） #

要使用SQLite必须通过后端服务操作数据库，前端通过AJAX请求后端接口完成数据插入。

步骤1：搭建Node.js后端服务 #

1. 安装依赖：

npm install express sqlite3 cors

2. 创建server.js文件：

const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const cors = require('cors');
const app = express();
const port = 3000;

app.use(cors());
app.use(express.json());

// 连接数据库（不存在则自动创建）
const db = new sqlite3.Database('./userData.db', sqlite3.OPEN_READWRITE | sqlite3.OPEN_CREATE, (err) => {
  if (err) console.error("数据库连接失败:", err);
  else console.log("数据库连接成功");
});

// 创建用户表
db.run(`CREATE TABLE IF NOT EXISTS userData (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  userN TEXT UNIQUE NOT NULL,
  passW TEXT NOT NULL
)`, (err) => {
  if (err) console.error("创建表失败:", err);
});

// 处理注册请求
app.post('/signup', (req, res) => {
  const { username, password } = req.body;
  if (!username || !password) {
    return res.status(400).json({ success: false, message: "用户名或密码不能为空" });
  }

  const sql = 'INSERT INTO userData(userN, passW) VALUES (?, ?)';
  db.run(sql, [username, password], function(err) {
    if (err) {
      if (err.message.includes("UNIQUE constraint failed")) {
        return res.status(400).json({ success: false, message: "用户名已存在" });
      }
      return res.status(500).json({ success: false, message: "插入数据失败" });
    }
    res.json({ success: true, message: "注册成功", userId: this.lastID });
  });
});

app.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
});

步骤2：修改前端代码 #

HTML（修复ID重复，阻止默认提交）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css">
    <title>sign up</title>
</head>
<body>
    <a href="pg1.html"><button class="pagebt"><<</button></a>
    <a href="login.html"><button class="pagebt">log in</button></a>
    <form id="signupForm">
        <div class="block">
            <h1>signUp</h1>
            <h2>username :</h2>
            <input type="text" class="input" id="username" required>
            <h2>password :</h2>
            <input type="password" class="input" id="password" required>
            <div>
                <button type="submit" class="intbut">submit</button>
            </div>
        </div>
    </form>
    <script src="signUp.js"></script>
</body>
</html>

• 修复原HTML中h2与input的ID重复问题，避免DOM选择错误。

JS（绑定提交事件，发送AJAX请求）

const signupForm = document.getElementById('signupForm');

signupForm.addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止表单默认刷新

  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();

  try {
    const response = await fetch('http://localhost:3000/signup', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password }),
    });

    const result = await response.json();
    if (result.success) {
      alert("注册成功！");
      signupForm.reset();
    } else {
      alert(result.message);
    }
  } catch (error) {
    console.error("请求失败:", error);
    alert("网络错误，请检查后端服务是否启动");
  }
});

步骤3：运行服务 #

1. 启动后端：

node server.js

2. 在浏览器打开前端HTML页面，输入信息提交即可完成数据库插入。

备选方案（纯前端数据库：IndexedDB） #

若不想搭建后端，可使用浏览器原生IndexedDB存储数据（仅本地存储，不支持多用户共享）：

// 初始化IndexedDB
function initDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('userDB', 1);

    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
      store.createIndex('userN', 'userN', { unique: true });
    };

    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
}

// 插入用户数据
async function insertUser(username, password) {
  const db = await initDB();
  return new Promise((resolve, reject) => {
    const transaction = db.transaction('users', 'readwrite');
    const store = transaction.objectStore('users');
    
    const addRequest = store.add({ userN: username, passW: password });
    addRequest.onsuccess = () => resolve(addRequest.result);
    addRequest.onerror = (err) => {
      if (err.message.includes("Unique constraint failed")) {
        reject(new Error("用户名已存在"));
      } else {
        reject(err);
      }
    };
  });
}

// 绑定表单事件
const signupForm = document.getElementById('signupForm');
signupForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();

  try {
    await insertUser(username, password);
    alert("注册成功！");
    signupForm.reset();
  } catch (err) {
    alert(err.message);
  }
});

内容的提问来源于stack exchange，提问作者Zekail