Web前端：如何在HTML页面中高效获取API数据并动态渲染表格-html教程-PHP中文网

Web前端：如何在HTML页面中高效获取API数据并动态渲染表格

心靈之曲

发布： 2025-12-04 12:51:39

原创

105人浏览过

web前端：如何在html页面中高效获取api数据并动态渲染表格

本教程详细介绍了如何在Web页面中使用JavaScript的Fetch API从远程接口获取JSON数据，并将其动态渲染到HTML表格中。文章涵盖了HTML表格结构、异步数据请求、JSON数据解析、DOM元素操作的最佳实践，特别是强调了`DOMContentLoaded`事件的重要性以及正确使用`innerHTML`来填充表格头部和内容，旨在帮助开发者构建功能完善的数据展示页面。

在现代Web开发中，从后端API获取数据并在前端页面展示是常见的需求。本教程将引导您完成这一过程，重点讲解如何利用JavaScript的Fetch API获取JSON数据，并将其动态地渲染到一个HTML表格中。

1. HTML基础结构准备

首先，我们需要一个基本的HTML页面结构，其中包含一个用于展示数据的表格。为了更好地组织表格内容，我们通常会使用<thead>（表格头部）和<tbody>（表格主体）标签。

<!DOCTYPE html>
<html>
  <head>
    <title>API数据动态表格</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>NASA设施列表</h1>

    <table id="data-table">
      <thead></thead>
      <tbody></tbody>
    </table>

    <script src="main.js"></script> <!-- 引入外部JavaScript文件 -->
  </body>
</html>

登录后复制

在上述HTML结构中：

立即学习“前端免费学习笔记（深入）”；

我们创建了一个id为data-table的<table>元素。
<thead>和<tbody>是空的，它们的内容将由JavaScript动态填充。
<script src="main.js"></script>用于引入我们的JavaScript逻辑。为了更好的代码组织和维护，强烈建议将JavaScript代码放在单独的文件中。

2. 使用Fetch API获取数据

Fetch API是现代浏览器提供的一个强大的接口，用于进行网络请求。它基于Promise，使得处理异步请求更加简洁。

我们将以NASA的一个公开API为例：https://data.nasa.gov/resource/gvk9-iz74.json。

// main.js

// 确保DOM完全加载后再执行脚本
document.addEventListener("DOMContentLoaded", function () {
  fetch("https://data.nasa.gov/resource/gvk9-iz74.json")
    .then((response) => {
      // 检查响应是否成功
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json(); // 将响应体解析为JSON
    })
    .then((data) => {
      // 数据获取成功后，开始渲染表格
      renderTable(data);
    })
    .catch((error) => {
      // 捕获请求或解析过程中的错误
      console.error("获取数据时发生错误:", error);
      document.getElementById('data-table').innerHTML = `<tr><td colspan="4">加载数据失败，请稍后再试。</td></tr>`;
    });
});

登录后复制

关键点解析：

SuperDesign

开源的UI设计AI智能体

216

查看详情

document.addEventListener("DOMContentLoaded", function() { ... });: 这是非常重要的一步。它确保了我们的JavaScript代码只在整个HTML文档（DOM）被完全加载和解析后才执行。如果没有这个，JavaScript可能会尝试操作尚未存在的HTML元素，导致错误。
fetch(url): 发起一个GET请求到指定的URL。
.then((response) => response.json()): fetch返回一个Promise，当请求成功时，response对象可用。我们首先检查response.ok确保HTTP状态码在200-299之间，然后调用response.json()方法，它会再次返回一个Promise，用于将响应体解析为JavaScript对象。
.then((data) => { ... }): 当JSON解析成功后，data参数将包含从API获取到的JavaScript对象（通常是数组）。
.catch((error) => { ... }): 用于捕获在fetch请求或.then()链中发生的任何错误，例如网络问题、服务器错误或JSON解析失败。

3. 动态渲染表格内容

获取到数据后，我们需要将其格式化为HTML表格行，并插入到<thead>和<tbody>中。

// main.js (在DOMContentLoaded事件监听器内部，紧接在fetch请求之后)

function renderTable(data) {
  const tableHead = document.querySelector("#data-table thead");
  const tableBody = document.querySelector("#data-table tbody");

  // 清空现有内容（可选，如果表格可能被多次更新）
  tableHead.innerHTML = '';
  tableBody.innerHTML = '';

  // 1. 渲染表格头部 (<thead>)
  let headerRow = `
    <tr>
      <th>中心名称</th>
      <th>城市</th>
      <th>州</th>
      <th>邮编</th>
    </tr>`;
  tableHead.innerHTML = headerRow;

  // 2. 渲染表格主体 (<tbody>)
  let rowsHtml = "";
  data.forEach((facility) => {
    // 确保数据字段存在，避免undefined
    const center = facility.center || 'N/A';
    const city = facility.city || 'N/A';
    const state = facility.state || 'N/A';
    const zipcode = facility.zipcode || 'N/A';

    rowsHtml += `
      <tr>
        <td>${center}</td>
        <td>${city}</td>
        <td>${state}</td>
        <td>${zipcode}</td>
      </tr>
    `;
  });
  tableBody.innerHTML = rowsHtml;
}

登录后复制

关键点解析：

document.querySelector("#data-table thead") 和 document.querySelector("#data-table tbody"): 使用querySelector选择器精确地获取表格的头部和主体元素。
innerHTML vs innerText:
- innerHTML: 用于设置或获取元素的HTML内容。当您需要将包含HTML标签的字符串插入到DOM中时，必须使用innerHTML。
- innerText: 仅用于设置或获取元素的纯文本内容。如果您尝试将包含HTML标签的字符串赋给innerText，这些标签将被视为普通文本并显示出来，而不是被浏览器解析为HTML元素。
- 在原问题中，一个常见的错误是将包含<tr>、<td>等HTML标签的字符串赋给innerText，这会导致表格无法正确渲染。正确的方法是使用innerHTML。
数据遍历与拼接: 使用forEach循环遍历从API获取到的data数组，为每个数据项构建一个<tr>（表格行）字符串，并将其累加到rowsHtml变量中。
模板字符串: 使用ES6的模板字符串（反引号 `）可以方便地嵌入变量（${variable}）和多行文本，使得HTML字符串的构建更加直观。
数据健壮性: 在访问facility.center等属性时，最好加上默认值（|| 'N/A'），以防API返回的数据中缺少某个字段，避免页面出现undefined。

4. 完整代码示例

将上述HTML和JavaScript代码整合后，您的index.html和main.js文件应如下所示：

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>API数据动态表格</title>
    <meta charset="UTF-8" />
    <style>
      /* 简单的表格样式，使其更具可读性 */
      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
      }
      th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <h1>NASA设施列表</h1>

    <table id="data-table">
      <thead></thead>
      <tbody></tbody>
    </table>

    <script src="main.js"></script>
  </body>
</html>

登录后复制

main.js:

document.addEventListener("DOMContentLoaded", function () {
  fetch("https://data.nasa.gov/resource/gvk9-iz74.json")
    .then((response) => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then((data) => {
      renderTable(data);
    })
    .catch((error) => {
      console.error("获取数据时发生错误:", error);
      const tableElement = document.getElementById('data-table');
      if (tableElement) {
        tableElement.innerHTML = `<thead><tr><th>加载失败</th></tr></thead><tbody><tr><td>无法加载数据，请检查网络或稍后再试。</td></tr></tbody>`;
      }
    });

  function renderTable(data) {
    const tableHead = document.querySelector("#data-table thead");
    const tableBody = document.querySelector("#data-table tbody");

    // 清空现有内容，确保每次渲染都是最新的
    tableHead.innerHTML = '';
    tableBody.innerHTML = '';

    // 渲染表格头部
    let headerRow = `
      <tr>
        <th>中心名称</th>
        <th>城市</th>
        <th>州</th>
        <th>邮编</th>
      </tr>`;
    tableHead.innerHTML = headerRow;

    // 渲染表格主体
    let rowsHtml = "";
    data.forEach((facility) => {
      const center = facility.center || 'N/A';
      const city = facility.city || 'N/A';
      const state = facility.state || 'N/A';
      const zipcode = facility.zipcode || 'N/A';

      rowsHtml += `
        <tr>
          <td>${center}</td>
          <td>${city}</td>
          <td>${state}</td>
          <td>${zipcode}</td>
        </tr>
      `;
    });
    tableBody.innerHTML = rowsHtml;
  }
});

登录后复制