本文详解如何在网页加载完成时自动发起 get 请求，从 express + postgresql 后端拉取数据并动态渲染到 html 表格中，解决“表单提交后表格不更新”的常见问题，兼顾可维护性与用户体验。
本文详解如何在网页加载完成时自动发起 get 请求，从 express + postgresql 后端拉取数据并动态渲染到 html 表格中，解决“表单提交后表格不更新”的常见问题，兼顾可维护性与用户体验。
在构建前后端分离的 CRUD 应用时，一个典型需求是：页面首次打开时即显示数据库中的全部记录（如矿企信息），用户提交新数据（POST）后，表格应实时反映最新状态。你已成功实现 POST 提交逻辑，但尚未将 GET 请求整合进前端生命周期——这正是当前核心缺口。
关键在于：GET 请求不应绑定在表单提交事件内（如注释中尝试的嵌套请求），而应作为独立的数据初始化步骤，在 DOM 就绪后立即执行，并支持后续手动刷新或自动更新。
✅ 正确做法：页面加载时自动拉取数据
将以下代码添加至 script.js 顶部（确保在其他事件监听器之前）：
// 在 DOM 完全加载后发起 GET 请求，填充表格
document.addEventListener('DOMContentLoaded', async () => {
try {
const response = await fetch('http://my_data:3000/mine_info');
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const data = await response.json();
renderTable(data);
} catch (error) {
console.error('❌ 获取矿企信息失败:', error);
document.getElementById('mine_info').innerHTML =
'<tr><td colspan="6" style="text-align:center; color:#d32f2f;">无法加载数据，请检查服务是否运行</td></tr>';
}
});
// 渲染数据到表格的纯函数（可复用）
function renderTable(rows) {
const tableBody = document.querySelector('#mine_info tbody') ||
document.querySelector('#mine_info');
// 清空现有内容（保留表头）
tableBody.innerHTML = '';
if (rows.length === 0) {
tableBody.innerHTML = '<tr><td colspan="6" style="text-align:center;">暂无数据</td></tr>';
return;
}
rows.forEach((row, index) => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td><p>${index + 1}</p></td>
<td><p>${row.n_mine || ''}</p></td>
<td><p>${row.name_mine || ''}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7710" title="前端设计优化skill"><img
src="https://img.php.cn/upload/skill/000/000/081/179163003435961.jpg" alt="前端设计优化skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7710" title="前端设计优化skill" class="overflowclass">前端设计优化skill</a>
<p class="overflowclass">前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7710" title="前端设计优化skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></td>
<td><p>${row.adress || ''}</p></td>
<td><p>${row.full_name_of_direcor || ''}</p></td>
<td><p>${row.phone_number || ''}</p></td>
`;
tableBody.appendChild(tr);
});
}
? 注意字段名一致性：后端返回的 JSON 字段（如 n_mine, name_mine）必须与前端渲染代码严格匹配。你当前 HTML 表格中
Name 对应的是 name_mine，而非 name —— 这与表单 name="name_m" 一致，但需确认 PostgreSQL 查询结果字段名是否完全相同（可通过 console.log(data) 验证）。
✅ 优化体验：提交后自动刷新表格（非整页重载）
你当前的 form.submit 事件中，提交后直接关闭弹窗，但表格未更新。建议在 POST 成功后不关闭弹窗、而是调用 renderTable() 刷新视图：
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = Object.fromEntries(new FormData(form).entries());
try {
const response = await fetch('http://my_data:3000/mine_info/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!response.ok) throw new Error('创建失败');
// ✅ 关键：提交成功后立即重新拉取最新数据（避免手动刷新）
const updatedRows = await fetch('http://my_data:3000/mine_info').then(r => r.json());
renderTable(updatedRows);
// 可选：清空表单 & 关闭弹窗
form.reset();
popup.classList.remove('popup_open');
form.classList.remove('open');
} catch (error) {
console.error('❌ 提交失败:', error);
alert('提交失败，请检查网络或后端服务');
}
});
⚠️ 注意事项与最佳实践
- 不要在表单 action 中写 URL：你当前的
- CORS 已配置，但需验证：确保后端 app.use(cors()) 在所有路由注册前生效，且浏览器控制台无跨域报错。
- 错误处理不可省略：网络中断、后端宕机、字段缺失等场景均需降级展示（如“暂无数据”提示），避免白屏。
- 性能考虑：若数据量大（>1000 行），建议后端分页（/mine_info?page=1&limit=50），前端配合加载状态（Loading Spinner）。
- 安全性提醒：生产环境务必校验后端 request.body 字段类型与长度，防止 SQL 注入或 XSS（如对 name_mine 做 HTML 转义后再渲染）。
通过以上改造，你的应用将具备完整的数据闭环：
页面加载 → GET 初始化表格 → 用户填写表单 → POST 写入数据库 → 自动 GET 刷新视图。
这是现代 Web 应用的标准数据流模式，既保障实时性，又提升用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
