<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fetch API Example</title>
<!-- 引用外部的 CSS 文件來設計頁面樣式 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Users List</h1>
<!-- 顯示用戶資料的容器 -->
<div id="users-container"></div>
<!-- 提交請求以獲取用戶資料的按鈕 -->
<button onclick="fetchUsers()">Load Users</button>
</div>
<!-- 引用外部的 JavaScript 文件來處理 Fetch API -->
<script src="script.js"></script>
</body>
</html>
// 使用 Fetch API 從公共 API 獲取用戶數據
function fetchUsers() {
const usersContainer = document.getElementById('users-container');
// 發送 HTTP GET 請求到 JSONPlaceholder API
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) {
// 如果 HTTP 狀態碼不是 200,則拋出錯誤
throw new Error('Network response was not ok');
}
return response.json(); // 解析 JSON 數據
})
.then(users => {
// 清空用戶容器中的內容
usersContainer.innerHTML = '';
// 遍歷每一個用戶並顯示用戶資料
users.forEach(user => {
const userDiv = document.createElement('div'); // 建立一個div元素來顯示用戶資訊
userDiv.classList.add('user');
// 將用戶的名字和電子郵件顯示在 div 中
userDiv.innerHTML = `
<h2>${user.name}</h2>
<p>Email: ${user.email}</p>
<p>Phone: ${user.phone}</p>
<p>Website: <a href="http://${user.website}" target="_blank">${user.website}</a></p>
`;
// 將這個 div 加到用戶容器中
usersContainer.appendChild(userDiv);
});
})
.catch(error => {
// 如果出現錯誤,顯示錯誤信息
usersContainer.innerHTML = `<p>Error: ${error.message}</p>`;
});
}
/* 基本樣式 */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 容器樣式 */
.container {
text-align: center;
width: 80%;
max-width: 600px;
}
/* 顯示用戶資料的樣式 */
.user {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px 0;
padding: 20px;
}
/* 按鈕樣式 */
button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
margin-top: 20px;
}
button:hover {
background-color: #218838;
}
/* 鏈接樣式 */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
本次使用jsonplaceholder生成虛擬api作為抓取對象
本次作業有使用chatgpt作為輔助