当前位置：首页 > 行业动态 > 正文

html表单信息js保存到数据库

admin
行业动态
2025-04-25
4754

通过HTML表单收集数据后，使用JavaScript的 fetch()或AJAX异步提交至后端接口（如Node.js/PHP），后端接收数据并执行SQL语句存入MySQL/MongoDB等数据库，需注意前后端数据格式匹配及安全性

HTML表单与JavaScript数据采集

HTML表单结构示例

<form id="userForm">
  <input type="text" name="username" placeholder="用户名" required />
  <input type="email" name="email" placeholder="邮箱" required />
  <button type="submit">提交</button>
</form>

JavaScript数据采集与传输

document.getElementById('userForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认提交行为
  // 获取表单数据
  const formData = new FormData(e.target);
  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });
  // 发送数据到服务器
  fetch('/api/save', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => alert('保存成功'))
  .catch(error => console.error('保存失败:', error));
});

后端部分：接收数据与数据库交互

技术栈对比表

技术环节	Node.js (Express)	PHP (Laravel)	Python (Flask)
路由定义	`app.post('/api/save', ...)`	`Route::post('/api/save')`	`@app.route('/api/save')`
数据解析	`req.body`	`$request->all()`	`request.get_json()`
数据库驱动	`mysql` / `sequelize`	Laravel Eloquent	SQLAlchemy / PEPew
异步处理	内置支持	需扩展	需扩展

以Node.js为例的实现

const express = require('express');
const mysql = require('mysql');
const app = express();
app.use(express.json()); // 解析JSON请求体
// 创建数据库连接池
const db = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'testdb'
});
// 保存数据接口
app.post('/api/save', (req, res) => {
  const { username, email } = req.body;
  // 数据校验（示例）
  if (!username || !email) return res.status(400).json({ error: '数据不完整' });
  // 插入数据库
  db.query('INSERT INTO users (username, email) VALUES (?, ?)', [username, email], (err, result) => {
    if (err) return res.status(500).json({ error: err.message });
    res.json({ success: true, id: result.insertId });
  });
});
app.listen(3000, () => console.log('服务器已启动'));

数据库设计示例（MySQL）

字段名	类型	约束	说明
id	INT AUTO_INCREMENT	PRIMARY KEY	自增主键
username	VARCHAR(50)	NOT NULL	用户名
email	VARCHAR(100)	NOT NULL	邮箱地址
created_at	TIMESTAMP	DEFAULT CURRENT_TIMESTAMP	创建时间