如何使用 Fetch API 实现表单数据的 AJAX 提交与数据库插入

<form id="myForm" class="form">   <button class="exit" id="closeButton" onclick="delRow()">х</button>   <div class="string">     <label for="id">№:</label>     <input type="number" id="id" name="id" required>   </div>   <div class="string">     <label for="N_m">Number:</label>     <input type="text" id="N_m" name="n_m" required>   </div>   <div class="string">     <label for="name">Name:</label>     <input type="text" id="name" name="name_m" required>   </div>   <div class="string">     <label for="Adr">Address:</label>     <input type="text" id="Adr" name="Adr_m">   </div>   <div class="string">     <label for="Full_name">Full name of the director:</label>     <input type="text" id="Full_name" name="director" required>   </div>   <div class="string">     <label for="Phone">Phone number:</label>     <input type="tel" id="Phone" name="Phone_number" placeholder="Например +00000000000" required>   </div>   <button type="submit" id="contact">Send to DB</button> </form>

接着，在 script.js 中添加表单提交事件监听器（务必调用 e.preventDefault() 阻止默认跳转）：

const form = document.getElementById('myForm');  form.addEventListener('submit', async (e) => {   e.preventDefault(); // 关键：阻止页面刷新    // 使用 FormData 自动收集所有带 name 属性的输入项   const formData = new FormData(form);   const data = Object.fromEntries(formData.entries());    console.log('Submitting data:', data); // 调试用    try {     const response = await fetch('/mine_info', {       method: 'POST',       headers: {         'Content-Type': 'application/json',       },       body: JSON.stringify(data),     });      if (!response.ok) {       throw new Error(`http error! status: ${response.status}`);     }      const result = await response.text(); // 注意：后端用 res.send() 返回文本，故用 .text()     console.log('Success:', result);      // ✅ 可选增强：提交成功后清空表单 & 关闭弹窗     form.reset();     document.querySelector('.popup').classList.remove('popup_open');     document.querySelector('.form').classList.remove('open');      // ✅ 可选增强：刷新表格数据（见下文）     loadTableData();    } catch (error) {     console.error('Submission failed:', error);     alert('提交失败，请检查网络或后端服务是否运行中。');   } });

⚠️ 重要注意事项：

• 后端 bodyParser.json() 已启用，因此前端必须设置 ‘Content-Type’: ‘application/json’ 并 JSON.stringify()；
• 若后端改用 res.json({ message: ‘…’ })，则前端需改为 await response.json()；
• 表单字段 name 属性值（如 n_m, name_m）必须与后端 SQL 参数名严格一致（见 createRow 函数中解构的 n_mine, name_mine），否则数据库插入会因参数缺失失败。

✅ 后端校验：确保字段映射正确

检查你的 createRow 函数中解构的字段名是否与前端 name 属性匹配：

// ❌ 错误示例（前端 name="n_m"，但后端期待 n_mine） const { n_mine, name_mine, ... } = request.body;  // ✅ 正确做法：保持前后端字段名统一 // 前端 input name="n_m" → 后端解构为 n_m const { n_m, name_m, Adr_m, director, Phone_number } = request.body;  pool.query(   'INSERT INTO mine_info (n_mine, name_mine, adress, full_name_of_direcor, phone_number) VALUES ($1, $2, $3, $4, $5) RETURNING *',   [n_m, name_m, Adr_m, director, Phone_number], // 顺序与 SQL 占位符严格对应   (error, results) => { /* ... */ } );

建议统一命名风格（如全小写+下划线），避免大小写或拼写差异导致 undefined 插入。

✅ 进阶：提交后自动刷新表格（可选）

为提升用户体验，可在提交成功后重新拉取最新数据并渲染表格：

async function loadTableData() {   try {     const response = await fetch('/mine_info');     const rows = await response.json();      const tableBody = document.querySelector('#mine_info tbody') ||                        document.querySelector('#mine_info').insertRow(0).parentNode; // 兼容无 tbody 情况      // 清空现有数据行（保留表头）     while (tableBody.rows.length > 1) {       tableBody.deleteRow(1);     }      // 插入新数据     rows.forEach((row, index) => {       const tr = tableBody.insertRow();       tr.innerHTML = `         <td><p>${index + 1}</p><div class="aritcle_card flexRow">                                                         <div class="artcardd flexRow">                                                                 <a class="aritcle_card_img" href="/ai/1162" title="暗壳AI"><img                                                                                 src="https://img.php.cn/upload/ai_manual/000/000/000/175680095316609.png" alt="暗壳AI"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>                                                                 <div class="aritcle_card_info flexColumn">                                                                         <a href="/ai/1162" title="暗壳AI">暗壳AI</a>                                                                         <p>Ark.art 包罗万象的艺术方舟，友好高效的设计助手</p>                                                                 </div>                                                                 <a href="/ai/1162" title="暗壳AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>                                                         </div>                                                 </div></td>         <td><p>${row.n_mine || ''}</p></td>         <td><p>${row.name_mine || ''}</p></td>         <td><p>${row.adress || ''}</p></td>         <td><p>${row.full_name_of_direcor || ''}</p></td>         <td><p>${row.phone_number || ''}</p></td>       `;     });   } catch (err) {     console.error('Failed to reload table:', err);   } }

并在提交成功回调中调用 loadTableData()，即可实现“所见即所得”的实时同步。

✅ CORS 问题？本地开发请配置代理（推荐）

若你在 http://localhost:5500（VS Code Live Server）访问页面，而 Node.js 后端运行在 http://localhost:3000，浏览器会因跨域拦截请求。不建议在生产环境禁用 CORS，开发阶段推荐两种安全方案：

1. 前端代理（推荐）：使用 vite 或 webpack-dev-server 配置 proxy，将 /mine_info 请求转发至 http://localhost:3000；
2. 后端启用 CORS：安装 cors 中间件：

   npm install cors

   const cors = require('cors'); app.use(cors()); // 允许所有源（开发用），生产环境应限制 origin

至此，你已掌握一个完整、健壮、可扩展的 AJAX 表单提交链路。从 DOM 操作、数据序列化、Fetch 请求、错误处理到用户体验优化，每一步都直击实际开发痛点。坚持练习，你离独立开发全栈应用只差一次 npm start 的距离。