性xxxxbbbb欧美熟妇,一个人在线观看www,欧美人和黑人牲交网站上线

使用Fetch API在HTML中動態(tài)獲取并渲染表格數(shù)據(jù)

碧海醫(yī)心

發(fā)布： 2025-10-18 09:40:26

原創(chuàng)

555人瀏覽過

使用fetch api在html中動態(tài)獲取并渲染表格數(shù)據(jù)

本教程詳細(xì)介紹了如何使用JavaScript的Fetch API從遠(yuǎn)程接口獲取數(shù)據(jù)，并將其動態(tài)渲染到HTML表格中。文章首先強調(diào)了理解API響應(yīng)數(shù)據(jù)結(jié)構(gòu)的重要性，隨后對比了兩種數(shù)據(jù)渲染方法：傳統(tǒng)的DOM操作和更高效的字符串模板結(jié)合`innerHTML`，并提供了完整的代碼示例和最佳實踐，旨在幫助開發(fā)者高效地實現(xiàn)前端數(shù)據(jù)展示。

引言：理解Fetch API與數(shù)據(jù)獲取

在現(xiàn)代Web開發(fā)中，從遠(yuǎn)程API獲取數(shù)據(jù)并將其展示在網(wǎng)頁上是一項核心任務(wù)。JavaScript的Fetch API提供了一種強大且靈活的方式來執(zhí)行網(wǎng)絡(luò)請求。它基于Promise，使得處理異步操作更加簡潔。本教程將通過一個具體的例子，演示如何使用Fetch API獲取數(shù)據(jù)，并將其動態(tài)渲染到一個HTML表格中。

我們將使用以下API端點作為示例：https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension。

API數(shù)據(jù)結(jié)構(gòu)解析

在開始編寫代碼之前，理解API返回的數(shù)據(jù)結(jié)構(gòu)至關(guān)重要。一個常見的錯誤是直接假設(shè)API返回的數(shù)據(jù)就是我們需要的數(shù)組，而忽略了它可能被包裹在一個對象中。

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；

對于我們示例中的API，其響應(yīng)是一個JSON對象，其中包含一個名為webshops的數(shù)組。每個webshop對象都包含name_short、link、orig_url和logo_120x60等字段。

錯誤的初始假設(shè)（常見誤區(qū)）：

// 假設(shè)數(shù)據(jù)直接是數(shù)組
[
  { "name": "...", "url": "...", "logo": "..." },
  // ...
]

登錄后復(fù)制

正確的API響應(yīng)結(jié)構(gòu)：

{
  "webshops": [
    {
      "id": "...",
      "name_short": "Webshop A",
      "link": "https://link.to/webshopA",
      "orig_url": "https://original.url/webshopA",
      "logo_120x60": "https://logo.url/webshopA.png",
      // ...其他字段
    },
    {
      "id": "...",
      "name_short": "Webshop B",
      "link": "https://link.to/webshopB",
      "orig_url": "https://original.url/webshopB",
      "logo_120x60": "https://logo.url/webshopB.png",
      // ...其他字段
    }
    // ...
  ]
}

登錄后復(fù)制

因此，在處理fetch返回的JSON數(shù)據(jù)時，我們需要通過data.webshops來訪問實際的列表數(shù)據(jù)，并且使用正確的字段名，如item.name_short而不是item.name。

方法一：基于DOM操作的傳統(tǒng)渲染

這種方法通過JavaScript的document.createElement和appendChild等DOM操作方法，逐個創(chuàng)建HTML元素并將其添加到DOM樹中。

飛書多維表格

表格形態(tài)的AI工作流搭建工具，支持批量化的AI創(chuàng)作與分析任務(wù)，接入DeepSeek R1滿血版

查看詳情

fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
  .then(response => response.json())
  .then(({ webshops }) => { // 使用解構(gòu)賦值直接獲取webshops數(shù)組
    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('獲取數(shù)據(jù)失敗:', error));

登錄后復(fù)制

優(yōu)點：

直觀，易于理解和調(diào)試。
適用于少量DOM元素的動態(tài)添加。

缺點：

當(dāng)需要添加大量元素時，頻繁的DOM操作會導(dǎo)致性能問題，因為每次appendChild都可能觸發(fā)瀏覽器重繪和回流。

方法二：利用字符串模板優(yōu)化渲染性能

為了提高性能，尤其是處理大量數(shù)據(jù)時，推薦使用字符串模板（Template Literals）構(gòu)建完整的HTML字符串，然后一次性通過innerHTML屬性插入到DOM中。這種方法減少了與DOM的交互次數(shù)。

fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
  .then(response => response.json())
  .then(({ webshops }) => { // 同樣使用解構(gòu)賦值
    const tableBody = document.querySelector('#api-table tbody');
    tableBody.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(''); // 將數(shù)組中的HTML字符串拼接成一個大字符串
  })
  .catch(error => console.error('獲取數(shù)據(jù)失敗:', error));

登錄后復(fù)制

優(yōu)點：

性能更優(yōu)： 減少了DOM操作的次數(shù)，只進(jìn)行一次innerHTML賦值，大大提高了渲染效率。
代碼簡潔： 使用字符串模板使得HTML結(jié)構(gòu)更清晰，更易于閱讀和維護。

缺點：

如果字符串拼接不當(dāng)，可能存在XSS（跨站腳本攻擊）風(fēng)險，尤其是在渲染用戶輸入的內(nèi)容時。務(wù)必對非信任數(shù)據(jù)進(jìn)行適當(dāng)?shù)膬艋╯anitization）。

完整的HTML與CSS結(jié)構(gòu)

為了使上述JavaScript代碼能夠正常運行，我們需要一個基本的HTML結(jié)構(gòu)來承載表格，以及一些CSS樣式來美化表格。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API數(shù)據(jù)動態(tài)表格</title>
  <style>
    table {
      border-collapse: collapse; /* 合并邊框 */
      width: 100%; /* 表格寬度占滿容器 */
      margin-top: 20px;
    }
    th, td {
      padding: 12px 8px; /* 內(nèi)邊距 */
      text-align: left; /* 文本左對齊 */
      border-bottom: 1px solid #ddd; /* 底部邊框 */
    }
    th {
      background-color: #f2f2f2; /* 表頭背景色 */
      font-weight: bold;
    }
    tr:hover {
      background-color: #f5f5f5; /* 行懸停效果 */
    }
    img {
      display: block; /* 避免圖片下方出現(xiàn)額外空白 */
    }
  </style>
</head>
<body>
  <h1>API數(shù)據(jù)動態(tài)展示</h1>
  <table id="api-table">
    <thead>
      <tr>
        <th>名稱</th>
        <th>鏈接</th>
        <th>Logo</th>
      </tr>
    </thead>
    <tbody>
      <!-- 數(shù)據(jù)將在此處動態(tài)加載 -->
    </tbody>
  </table>

  <script>
    // 將上述優(yōu)化后的JavaScript代碼（方法二）放入此處
    fetch('https://www.sponsorkliks.com/api/?club=11592&call=webshops_club_extension')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then(({ webshops }) => {
        const tableBody = document.querySelector('#api-table tbody');
        if (webshops && Array.isArray(webshops)) {
          tableBody.innerHTML = webshops.map(item =>
            `<tr>
              <td>${item.name_short}</td>
              <td><a href="${item.link}" target="_blank">${item.orig_url}</a></td>
              <td>
                <img src="${item.logo_120x60}"
                  style="max-width:100px; height:auto;"
                  alt="${item.name_short}">
              </td>
            </tr>`
          ).join('');
        } else {
          console.warn('API響應(yīng)中未找到webshops數(shù)組或其格式不正確。');
          tableBody.innerHTML = '<tr><td colspan="3">暫無數(shù)據(jù)</td></tr>';
        }
      })
      .catch(error => {
        console.error('獲取或處理數(shù)據(jù)失敗:', error);
        document.querySelector('#api-table tbody').innerHTML = '<tr><td colspan="3" style="color:red;">加載數(shù)據(jù)失敗，請檢查網(wǎng)絡(luò)或API。</td></tr>';
      });
  </script>
</body>
</html>

登錄后復(fù)制

注意事項與最佳實踐

錯誤處理： 始終在fetch鏈中包含.catch()塊來捕獲網(wǎng)絡(luò)錯誤或JSON解析錯誤。同時，檢查response.ok狀態(tài)可以捕獲HTTP協(xié)議層面的錯誤（如404, 500）。
API響應(yīng)結(jié)構(gòu)： 在編寫代碼之前，通過瀏覽器開發(fā)者工具或Postman等工具檢查API的實際響應(yīng)結(jié)構(gòu)，確保正確訪問數(shù)據(jù)字段。
異步操作： fetch是異步的。這意味著它不會立即返回數(shù)據(jù)，而是返回一個Promise。所有依賴于API數(shù)據(jù)的操作都應(yīng)該放在.then()回調(diào)中。
DOM操作性能： 當(dāng)處理大量數(shù)據(jù)時，盡量減少直接的DOM操作。使用字符串模板結(jié)合innerHTML通常是更高效的選擇。
安全性： 如果API返回的數(shù)據(jù)可能包含用戶生成的內(nèi)容，并且您使用innerHTML來渲染，請務(wù)必對內(nèi)容進(jìn)行適當(dāng)?shù)膬艋幚?，以防止XSS攻擊。
用戶體驗： 在數(shù)據(jù)加載過程中，可以顯示加載指示器（如“加載中...”文本或旋轉(zhuǎn)圖標(biāo)），提高用戶體驗。當(dāng)數(shù)據(jù)加載失敗時，也應(yīng)提供友好的錯誤提示。
CSS樣式： 適當(dāng)?shù)腃SS樣式可以使表格更具可讀性和專業(yè)性。

總結(jié)

通過本教程，我們學(xué)習(xí)了如何使用JavaScript的Fetch API從遠(yuǎn)程接口獲取JSON數(shù)據(jù)，并將其動態(tài)渲染到HTML表格中。我們強調(diào)了理解API響應(yīng)結(jié)構(gòu)的重要性，并對比了兩種數(shù)據(jù)渲染方法：傳統(tǒng)的DOM操作和更高效的字符串模板結(jié)合innerHTML。在實際開發(fā)中，推薦使用后者來優(yōu)化性能，并始終牢記錯誤處理和安全性等最佳實踐，以構(gòu)建健壯且用戶友好的Web應(yīng)用。

以上就是使用Fetch API在HTML中動態(tài)獲取并渲染表格數(shù)據(jù)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：