本文介绍如何通过 JavaScript 动态添加多个文本输入框，实时收集所有字段的值，并通过后端（如 Node.js）安全存入 MySQL 数据库，解决纯前端无法直连数据库的关键限制。
本文介绍如何通过 JavaScript 动态添加多个文本输入框，实时收集所有字段的值，并通过后端（如 Node.js）安全存入 MySQL 数据库，解决纯前端无法直连数据库的关键限制。
在构建表单类应用（如多条目信息录入、动态问卷、标签管理等）时，常需支持“点击按钮新增文本框”并最终统一提交所有输入内容。实现该功能需前后端协同：前端负责动态 DOM 操作与数据聚合，后端负责接收、校验与持久化。
✅ 前端：动态添加 + 批量采集
使用 document.createElement 创建输入框，并为每个元素赋予唯一标识（如 name="item[]" 或 data-index），便于后续统一获取。推荐将所有输入值收集为数组，再通过 fetch 提交：
<div id="field-container"></div> <button id="add-btn">+ 添加字段</button> <button id="submit-btn">提交全部</button>
let fieldIndex = 0;
const container = document.getElementById('field-container');
const addBtn = document.getElementById('add-btn');
const submitBtn = document.getElementById('submit-btn');
addBtn.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'text';
input.name = 'items[]'; // 便于后端解析为数组
input.placeholder = `请输入第 ${++fieldIndex} 项`;
input.className = 'dynamic-input';
container.appendChild(input);
});
submitBtn.addEventListener('click', () => {
// 收集所有 .dynamic-input 的值（自动过滤空值）
const values = Array.from(
document.querySelectorAll('.dynamic-input')
).map(el => el.value.trim()).filter(val => val !== '');
if (values.length === 0) {
alert('请至少输入一个有效内容');
return;
}
// 通过 POST 提交至后端接口
fetch('/api/save-items', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: values })
})
.then(res => res.json())
.then(data => alert(`成功保存 ${data.count} 条记录`))
.catch(err => console.error('提交失败:', err));
});⚠️ 注意事项：
- 避免使用 eval() 或拼接 SQL 字符串；始终通过参数化查询（如 Node.js 中的 mysql2 库）防止 SQL 注入。
- 前端仅作初步非空/长度校验，关键业务校验必须由后端执行。
- 不要尝试在浏览器中直接连接 MySQL（如使用 mysql 包）——这会暴露数据库凭证且违反同源策略。
✅ 后端（Node.js + Express + mysql2 示例）
const express = require('express');
const mysql = require('mysql2/promise');
const app = express();
const pool = mysql.createPool({
host: 'localhost',
user: 'your_user',
password: 'your_pass',
database: 'your_db',
waitForConnections: true,
connectionLimit: 10
});
app.use(express.json());
app.post('/api/save-items', async (req, res) => {
const { items } = req.body;
if (!Array.isArray(items) || items.length === 0) {
return res.status(400).json({ error: '缺少有效数据' });
}
try {
const connection = await pool.getConnection();
// 使用 ? 占位符实现参数化插入（防注入）
const [result] = await connection.execute(
'INSERT INTO items (content) VALUES ?',
[items.map(item => [item])] // [[val1], [val2], ...]
);
connection.release();
res.json({ count: result.affectedRows });
} catch (err) {
console.error(err);
res.status(500).json({ error: '保存失败' });
}
});✅ 总结
- ✅ 前端用 Array.from().map() 高效采集动态字段值；
- ✅ 使用 name="items[]" 或 JSON 提交，确保后端可解析为数组；
- ❌ 绝对禁止前端直连数据库；必须经由受控后端 API 中转；
- ✅ 后端务必采用连接池 + 参数化查询，兼顾性能与安全；
- ? 生产环境还需补充身份认证（如 JWT）、CSRF 防护与输入清洗。
掌握这一模式，即可灵活支撑标签管理、多图描述、动态配置项等常见业务场景。
