將 API 整合到您的網站：帶有實際範例的初學者指南-js教程-PHP中文網

將 API 整合到您的網站：帶有實際範例的初學者指南

Susan Sarandon

發布： 2024-10-01 14:22:29

原創

280 人瀏覽過

透過 API，網站可以像魔術一樣相互通信，並為您的網站添加動態功能。任何 Web 開發人員都需要 API：從顯示即時天氣，到獲取最新新聞或直接從您最喜歡的服務中提取...

在本初學者指南中，我將透過一個您可以遵循的實際範例引導您了解如何將 API 整合到您的網站中。有了這些知識，您將能夠從 API 存取資料並將其顯示在您的網頁上，而無需任何後端伺服器！

Integrating APIs into Your Website: A Beginner’s Guide with Practical Examples

什麼是 API？

API（應用程式介面）是兩個軟體互動和共享資料的一種方式。簡單來說，API 允許您從伺服器請求資訊並在您自己的網站或應用程式中使用它。

例如，如果您看過顯示特定位置天氣的網站，它們很可能會使用天氣服務提供的 API。透過連接API，網站可以獲得即時數據並展示給用戶。

為什麼要整合 API？

為您的網站新增 API 可以：

使其更具互動性和動態性。
節省時間，因為您不需要從頭開始建立所有內容。
為使用者提供即時訊息，無需手動更新。

想像一下建立一個作品集網站，您想在其中顯示您最近的推文。您可以使用 Twitter API 自動顯示您的最新更新，而不是手動複製每條推文。

逐步指南：將 API 整合到您的網站中

為了使其易於理解，我們將使用一個名為 JSONPlaceholder 的免費 API。這是一個假的線上 REST API，非常適合學習和原型設計。

目標：我們希望從 API 取得貼文清單並將其顯示在我們的網站上。

第 1 步：設定 HTML 檔案
首先建立一個用於託管貼文的基本 HTML 結構：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API Integration Example</title>
</head>
<body>
  <h1>Posts from API</h1>
  <div id="posts"></div>

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

登入後複製

我們有一個空的 ID 帖子，我們將在其中添加從 API 獲取的帖子。
我們也連結到外部 JavaScript 檔案 (script.js)，我們將在其中編寫邏輯來取得和顯示資料。 第 2 步：寫 JavaScript 來取得資料 建立一個名為 script.js 的檔案並加入以下程式碼：

// Get the container element where posts will be displayed
const postsContainer = document.getElementById('posts');

// Use the Fetch API to get data from the JSONPlaceholder API
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json()) // Convert the response to JSON format
  .then(posts => {
    // Loop through each post and display it on the page
    posts.forEach(post => {
      // Create a new div element for each post
      const postDiv = document.createElement('div');
      postDiv.innerHTML = `
        <h2>${post.title}</h2>
        <p>${post.body}</p>
      `;
      // Append the new div to the container
      postsContainer.appendChild(postDiv);
    });
  })
  .catch(error => console.error('Error fetching posts:', error));

登入後複製

說明