这次我们将学习使用 Alpine JS 从 API 获取数据。我们将创建一个网站，显示参加英超联赛的足球俱乐部列表（取自以下 API）。
Alpine JS 是一个轻量级的 Javascript 框架，我们可以用它来创建交互式网站，而无需使用 React 或 Vue 等框架。使用 Alpine JS 时，我们可以轻松地将 Javascript 属性直接应用于 HTML 文件，而无需单独编写它们。
请创建一个名为 index.html 的 HTML 文件，然后粘贴以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Latihan Alpine JS</title>
<!-- Import Alpine JS -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Import Tailwind -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
<style>
* {
font-family: "Roboto", sans-serif;
}
</style>
</head>
<body>
</body>
</html>
登录后复制
接下来我们将使用 Tailwind CSS 创建一个卡片组件。
<div class="container px-4 py-12 mx-auto">
<div class="flex flex-wrap">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<img alt="logo" class="object-cover h-56 mx-auto" src="" />
<div class="mt-4">
<h2 class="text-gray-500 text-xs tracking-widest mb-1"></h2>
<h1 class="text-gray-900 text-xl font-medium"></h1>
</div>
</div>
</div>
</div>
登录后复制
然后我们将获取数据并将其显示在卡片组件上。
<div class="flex flex-wrap" x-data="{ teams: [] }" x-init="fetch('https://www.thesportsdb.com/api/v1/json/3/search_all_teams.php?l=English%20Premier%20League').then(response => response.json()).then(data => { teams = data.teams })">
<template x-for="team in teams">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<img x-bind:alt="team.idTeam" class="object-cover h-56 mx-auto" x-bind:src="team.strBadge" />
<div class="mt-4">
<h2 class="text-gray-500 text-xs tracking-widest mb-1" x-text="team.strLocation"></h2>
<h1 class="text-gray-900 text-xl font-medium" x-text="team.strTeam"></h1>
</div>
</div>
</template>
</div>
登录后复制
恭喜！您已成功使用 Alpine JS 获取 API 并将其显示给用户，以下是结果。
以下是对创建的代码的解释。
x-data 函数用于容纳 Javascript 逻辑数据直接在 HTML 标签上运行。在此代码中，我们创建一个名为 team 的变量，其数据类型为数组。该变量旨在保存函数中获取结果的数据。
x-init 旨在在组件加载之前执行初始化。在此代码中，我们插入一个 fetch 函数，旨在从我们之前准备的 API 端点检索数据。然后在浏览器页面显示之前，Alpine JS 会在后台执行一次抓取过程，然后抓取的结果会被收集到一开始声明的 team 变量中。
x-for用于对teams变量进行迭代过程，然后放回team变量中。
x-bind 显示图像，x-text 将数据直接打印到 HTML 显示中。
以上是使用 Alpine JS 获取数据的详细内容。更多信息请关注PHP中文网其他相关文章！
