动态添加文本框并批量提交数据到数据库，是Web开发中常见的需求。以下是一个基于HTML、JavaScript和PHP的简单实现示例，帮助你理解整个流程。一、前端

本文介绍如何通过 JavaScript 动态添加多个文本输入框，实时收集所有字段的值，并通过后端（如 Node.js）安全存入 MySQL 数据库，解决纯前端无法直连数据库的关键限制。

本文介绍如何通过 JavaScript 动态添加多个文本输入框，实时收集所有字段的值，并通过后端（如 Node.js）安全存入 MySQL 数据库，解决纯前端无法直连数据库的关键限制。

在构建表单类应用（如多条目信息录入、动态问卷、标签管理等）时，常需支持“点击按钮新增文本框”并最终统一提交所有输入内容。实现该功能需前后端协同：前端负责动态 DOM 操作与数据聚合，后端负责接收、校验与持久化。

✅ 前端：动态添加 + 批量采集

使用 document.createElement 创建输入框，并为每个元素赋予唯一标识（如 name="item[]" 或 data-index），便于后续统一获取。推荐将所有输入值收集为数组，再通过 fetch 提交：

+ 添加字段
提交全部

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 防护与输入清洗。

掌握这一模式，即可灵活支撑标签管理、多图描述、动态配置项等常见业务场景。