如何通过按钮触发JavaScript查询将数据写入MySQL数据库？

你需要搭建一个简单的Web服务，配合前端页面的按钮来触发数据库操作，以下是具体步骤：

步骤1：初始化项目并安装依赖 #

在项目目录终端执行以下命令，初始化项目并安装所需工具包：

npm init -y
npm install express mysql2 body-parser

（mysql2比原生mysql包更稳定，还支持Promise语法，更适合新手）

步骤2：编写后端服务代码（示例命名为server.js） #

注意绝对不能用字符串拼接用户输入到SQL语句中，这会导致严重的SQL注入漏洞，必须使用参数化查询：

const express = require('express');
const mysql = require('mysql2/promise');
const bodyParser = require('body-parser');

const app = express();
// 解析前端传来的JSON和表单数据
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 创建数据库连接池
const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'test', // 直接指定数据库，简化SQL语句
  connectionLimit: 10,
});

// 处理前端的用户插入请求
app.post('/add-user', async (req, res) => {
  try {
    const { fname, lname, email } = req.body;
    // 用?作为占位符，参数化查询避免SQL注入
    const [result] = await pool.execute(
      'INSERT INTO users(first_name, last_name, email) VALUES(?, ?, ?)',
      [fname, lname, email]
    );
    res.status(200).json({ success: true, insertId: result.insertId });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: '插入失败' });
  }
});

// 提供带按钮的前端页面
app.get('/', (req, res) => {
  res.send(`
    <html>
      <body>
        <input type="text" id="fname" placeholder="名">
        <input type="text" id="lname" placeholder="姓">
        <input type="email" id="email" placeholder="邮箱">
        <button onclick="addUser()">添加用户</button>
        <script>
          async function addUser() {
            const fname = document.getElementById('fname').value;
            const lname = document.getElementById('lname').value;
            const email = document.getElementById('email').value;
            
            if (!fname || !lname || !email) {
              alert('请填写完整信息');
              return;
            }
            
            try {
              const response = await fetch('/add-user', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({ fname, lname, email }),
              });
              const data = await response.json();
              if (data.success) {
                alert('用户添加成功，ID：' + data.insertId);
                // 清空输入框
                document.getElementById('fname').value = '';
                document.getElementById('lname').value = '';
                document.getElementById('email').value = '';
              } else {
                alert('添加失败，请重试');
              }
            } catch (err) {
              alert('网络错误，请检查服务是否运行');
            }
          }
        </script>
      </body>
    </html>
  `);
});

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

步骤3：运行并测试 #

在终端执行：

node server.js

打开浏览器访问http://localhost:3000，输入信息后点击按钮，即可触发数据库插入操作。

关键注意点 #

• SQL注入防护：必须使用参数化查询（pool.execute+占位符?），禁止直接拼接用户输入到SQL语句中，否则恶意输入可能破坏你的数据库。
• 异步处理：用async/await处理数据库操作和AJAX请求，代码逻辑更清晰，避免回调嵌套。
• 基础校验：前端添加简单的空值校验，避免无效请求发送到后端。

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