使用 Fetch API 在 HTML 中获取并展示动态数据_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-18

浏览次数：次

返回列表

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

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

在现代Web开发中，从后端API获取数据并将其展示在前端页面是常见的需求。J*aScript的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。

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

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

WeWedding婚纱影楼小程序

婚纱影楼小程序提供了一个连接用户与影楼的平台，相当于影楼在微信的官网。它能帮助影楼展示拍摄实力，记录访客数据，宣传优惠活动。使用频率高，方便传播，是影楼在微信端宣传营销的得力助手。功能特点：样片页是影楼展示优秀摄影样片提供给用户欣赏并且吸引客户的。套系页是影楼根据市场需求推出的不同套餐，用户可以按照自己的喜好预定套系。个人中心可以查看用户预约的拍摄计划，也可以获取到影楼的联系方式。

0 查看详情 WeWedding婚纱影楼小程序

首先，准备好您的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>
    // J*aScript 代码将放在这里
  </script>
</body>
</html>

接下来是使用J*aScript动态填充表格的代码。请注意，这里我们通过解构赋值直接获取 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>
            @@##@@
          </td>
        </tr>`
      ).join(''); // 将数组中的所有HTML字符串连接成一个大字符串
  })
  .catch(error => console.error('数据获取或渲染失败:', error));

这种优化方法的优势：

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

总结与最佳实践

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

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

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

$${item.name_short}$

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

# 大连seo培训怎么操作 # 您的 # 并将其 # 过程中 # 将其 # 自定义 # 您需要 # 抖音直播可以营销推广么 # SEO基础T恤打结教程 # 复选框 # seo外链功能 # 专业的广州微网站建设 # 推广平台营销口号 # 钢城网站建设价格 # 河北seo教程软件 # 如何做好自媒体营销推广 # 同仁网站推广 # css # 数据结构 # 字段名 # web # 状态码 # 后端 # 工具 # app # 浏览器 # go # json # 前端 # js # html # java # javascript

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：将 Flexbox 元素左右对齐：实用指南

下一篇：为异步 Fetch 请求添加等待动画

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们