使用 Fetch API 在 HTML 中获取并展示动态数据-js教程-PHP中文网

使用 Fetch API 在 HTML 中获取并展示动态数据

心靈之曲

发布： 2025-10-18 10:40:26

原创

376人浏览过

使用 fetch api 在 html 中获取并展示动态数据

本文详细介绍了如何使用 JavaScript 的 Fetch API 从外部接口获取 JSON 数据，并将其动态渲染到 HTML 表格中。文章首先阐明了理解 API 响应结构的重要性，随后对比演示了两种数据渲染方式：一种是逐个创建 DOM 元素的传统方法，另一种是利用 `innerHTML` 和模板字符串进行高效渲染的优化方法，旨在帮助开发者构建性能更优的动态网页。

在现代Web开发中，从后端API获取数据并将其展示在前端页面是常见的需求。JavaScript的Fetch API提供了一种强大且灵活的方式来执行网络请求。本教程将引导您如何使用Fetch API获取数据，并将其动态地渲染到一个HTML表格中。

Fetch API 基础与数据获取

Fetch API是一个基于Promise的接口，用于发出网络请求。它的基本用法非常直观。当您发起一个Fetch请求时，它会返回一个Promise，该Promise在网络响应可用时解析为Response对象。您需要进一步调用.json()方法（如果响应是JSON格式）来解析响应体，它也会返回一个Promise，解析后即可获得实际的数据。

以下是使用Fetch API获取数据的基本结构：

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

fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
  .then(response => {
    // 检查响应是否成功 (HTTP状态码在200-299之间)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 将响应体解析为JSON
    return response.json();
  })
  .then(data => {
    // 在这里处理获取到的数据
    console.log(data);
  })
  .catch(error => {
    // 捕获请求或解析过程中发生的任何错误
    console.error('数据获取失败:', error);
  });

登录后复制

关键点：

fetch(url): 发起GET请求到指定的URL。
.then(response => response.json()): 当请求成功时，将响应体解析为JSON对象。这是异步操作，因此需要另一个.then()来处理解析后的数据。
.catch(error => console.error(error)): 捕获在请求或JSON解析过程中可能发生的任何错误。

理解 API 响应结构

在处理从API获取的数据时，最重要的一步是理解其返回的JSON结构。一个常见的错误是假设API直接返回一个数组，而实际上它可能返回一个包含数组的对象。

以我们使用的API为例：https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension。当您调用此API并解析其JSON响应时，您会发现数据被封装在一个对象中，其中包含一个名为 webshops 的数组。

{
  "webshops": [
    {
      "id": "...",
      "name_short": "...",
      ""link": "...",
      "orig_url": "...",
      "logo_120x60": "..."
      // ... 更多字段
    },
    // ... 更多webshop对象
  ]
}

登录后复制

这意味着在您的.then(data => { ... })块中，您不应该直接迭代 data，而应该迭代 data.webshops。此外，您需要使用 webshop 对象内部的正确字段名，例如 item.name_short、item.link、item.orig_url 和 item.logo_120x60。

TapNow

新一代AI视觉创作引擎

115

查看详情

渲染数据到 HTML 表格 (传统 DOM 操作)

一旦获取并理解了数据结构，下一步就是将其渲染到HTML页面。一个常见的做法是动态创建HTML元素并将其附加到DOM中。

首先，准备好您的HTML表格结构和一些基本样式：

<!DOCTYPE html>
<html>
<head>
  <title>API 数据表格</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>
  <table id="api-table">
    <thead>
      <tr>
        <th>名称</th>
        <th>URL</th>
        <th>Logo</th>
      </tr>
    </thead>
    <tbody>
      <!-- 数据将在这里插入 -->
    </tbody>
  </table>

  <script>
    // JavaScript 代码将放在这里
  </script>
</body>
</html>

登录后复制

接下来是使用JavaScript动态填充表格的代码。请注意，这里我们通过解构赋值直接获取 webshops 数组，并使用正确的字段名。

// ... (在 <script> 标签内)
fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
  .then(response => response.json())
  .then(({ webshops }) => { // 使用解构赋值直接获取webshops数组
    const tableBody = document.querySelector('#api-table tbody');
    webshops.forEach(item => {
      const row = document.createElement('tr');

      const nameCell = document.createElement('td');
      nameCell.textContent = item.name_short; // 使用正确的字段名
      row.appendChild(nameCell);

      const urlCell = document.createElement('td');
      const urlLink = document.createElement('a');
      urlLink.href = item.link; // 使用正确的字段名
      urlLink.textContent = item.orig_url; // 使用正确的字段名
      urlCell.appendChild(urlLink);
      row.appendChild(urlCell);

      const logoCell = document.createElement('td');
      const logoImg = document.createElement('img');
      logoImg.src = item.logo_120x60; // 使用正确的字段名
      logoImg.alt = item.name_short;
      logoImg.style.maxWidth = '100px';
      logoCell.appendChild(logoImg);
      row.appendChild(logoCell);

      tableBody.appendChild(row);
    });
  })
  .catch(error => console.error('数据获取或渲染失败:', error));

登录后复制

注意事项： 这种通过 document.createElement 和 appendChild 逐个创建并附加DOM元素的传统方法在处理大量数据时可能会导致性能问题，因为它涉及频繁地修改DOM树，触发浏览器重绘和回流。

优化数据渲染 (使用 innerHTML 和模板字符串)

为了提高性能，尤其是在处理大量数据时，推荐使用 innerHTML 结合模板字符串 (``) 来一次性构建HTML字符串，然后将其插入到DOM中。这种方法减少了DOM操作的次数，从而提高了效率。

// ... (在 <script> 标签内)
fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
  .then(response => response.json())
  .then(({ webshops }) => {
    document.querySelector('#api-table tbody').innerHTML =
      webshops.map(item =>
        `<tr>
          <td>${item.name_short}</td>
          <td><a href="${item.link}">${item.orig_url}</a></td>
          <td>
            <img src="${item.logo_120x60}"
              style="max-width:100px"
              alt="${item.name_short}">
          </td>
        </tr>`
      ).join(''); // 将数组中的所有HTML字符串连接成一个大字符串
  })
  .catch(error => console.error('数据获取或渲染失败:', error));

登录后复制

这种优化方法的优势：

性能提升： 减少了DOM操作的次数，因为只进行了一次 innerHTML 赋值。
代码简洁： 使用模板字符串可以更直观地构建复杂的HTML结构。
可读性好： HTML结构在JavaScript代码中清晰可见。

总结与最佳实践

通过本教程，您应该已经掌握了使用Fetch API从外部接口获取数据，并将其高效渲染到HTML表格中的方法。以下是一些关键的总结和最佳实践：

始终检查API响应结构： 在开始渲染数据之前，务必通过 console.log() 或浏览器开发者工具检查API返回的JSON结构，确保您能正确访问所需的数据字段。
错误处理不可忽视： 使用 .catch() 块来优雅地处理网络请求或数据解析过程中可能出现的错误，提升用户体验。
优化DOM操作： 对于需要渲染大量数据的场景，优先考虑使用 innerHTML 结合模板字符串 (map().join('')) 的方式，而不是频繁地创建和附加DOM元素，以获得更好的性能。
清晰的HTML和CSS结构： 保持HTML结构语义化，并使用CSS进行样式分离，提高代码的可维护性。

掌握这些技术将使您能够更有效地构建动态和响应式的Web应用程序。

以上就是使用 Fetch API 在 HTML 中获取并展示动态数据的详细内容，更多请关注php中文网其它相关文章！