将 API 集成到您的网站：带有实际示例的初学者指南-js教程-PHP中文网

将 API 集成到您的网站：带有实际示例的初学者指南

Susan Sarandon

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

原创

279 人浏览过

通过 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));

登录后复制

说明