登录
首页 >  文章 >  前端

前端加载时自动获取并渲染数据库表格数据的实现方法如下： 1. **页面加载事件**：在前端使用 `window.onload` 或 `DOMContentLoaded` 事件来触发数据请求，确保页面元素已经加载完成。 2. **AJAX 请求**：通过 AJAX（如 jQuery 的 `$.ajax()` 或原生的 `fetch()`）向后端 API 发送请求，获取数据库中的表格数据。 3.

时间：2026-04-09 23:03:53 216浏览 收藏

推广推荐
前往下载Windows工具 ➜
支持 PC / 移动端，安全直达
本文深入讲解了如何在网页首次加载时自动从Express + PostgreSQL后端获取表格数据，并通过原生JavaScript实现安全、可靠、可维护的动态渲染，涵盖页面加载时机选择、fetch请求封装、结构化数据解析、防错渲染逻辑、POST提交后的实时更新闭环，以及CORS配置、字段名一致性、HTML语义化等关键避坑要点，帮助开发者构建具备完整数据读写与同步能力的全栈表格应用，让页面真正“开箱即用、所见即所得”。

本文详解如何在网页初始化时通过 GET 请求从 Express + PostgreSQL 后端拉取数据，并动态填充 HTML 表格，实现“页面一打开就显示最新数据”的完整流程，含代码示例、关键注意事项与最佳实践。

在构建全栈应用时，仅实现表单提交（POST）是不够的——用户首次访问页面时，必须看到已存在的数据。这正是 GET 请求的核心作用：在 DOM 加载完成时主动拉取服务端数据，并动态渲染到表格中。你已成功实现 POST 写入逻辑，现在只需补充“读取 → 解析 → 渲染”闭环，即可让表格真正“活起来”。

✅ 正确的 GET 请求时机与写法

不应将 GET 请求嵌套在 form.submit 事件中（如你注释掉的那段代码），而应在页面加载完成后立即发起。使用 DOMContentLoaded 事件确保 DOM 就绪后再执行：

// script.js —— 新增：页面加载时获取并渲染数据
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 rows = await response.json();
    renderTableData(rows);
  } catch (err) {
    console.error('❌ 获取表格数据失败：', err);
    // 可选：向用户展示友好提示（如 <div id="error">加载失败，请重试</div>）
  }
});

✅ 动态渲染表格的可靠方法

避免手动拼接 HTML 字符串（易出错、难维护）。推荐清空 后逐行插入 ，同时严格匹配后端字段名（注意：你的后端 SQL 查询返回的是 mine_info 表全部列，但 createRow 中解构的字段名与数据库列名不一致，需统一！）：

function renderTableData(data) {
  const tableBody = document.querySelector('#mine_info tbody') || 
                     document.querySelector('#mine_info').insertAdjacentElement('beforeend', document.createElement('tbody'));

  // 清空现有内容（保留表头）
  tableBody.innerHTML = '';

  data.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></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);
  });
}

? 关键提醒：你的后端 createRow 函数中解构的字段名为 n_mine, name_mine, adress, full_name_of_direcor, phone_number，请确保数据库表 mine_info 的列名与之一致（例如 adress 而非 address）。否则 GET 返回的数据字段将为 undefined，导致渲染空白。

✅ POST 成功后实时更新表格（无需刷新）

你当前的 POST 逻辑在提交后关闭弹窗，但未刷新表格——用户看不到新数据。优化方案：POST 成功后，直接调用 renderTableData 重新拉取最新数据（比手动追加 更安全，避免客户端状态与数据库不一致）：

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form).entries());

  try {
    const postResponse = await fetch('http://my_data:3000/mine_info/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    if (!postResponse.ok) throw new Error('POST 失败');

    // ✅ 关键改进：POST 成功后，立即重新 GET 并渲染
    const getResponse = await fetch('http://my_data:3000/mine_info');
    const updatedRows = await getResponse.json();
    renderTableData(updatedRows);

  } catch (err) {
    console.error('⚠️ 提交或刷新数据时出错：', err);
  } finally {
    form.classList.remove('open');
    popup.classList.remove('popup_open');
  }
});

⚠️ 必须检查的 3 个常见陷阱