如何使用JavaScript和HTML从REST API中选择特定数据

要从REST API中选择特定数据并使用JavaScript和HTML显示它们，你需要执行以下步骤：

基础概念

REST API：一组定义和协议，用于构建和设计网络服务。它允许不同的应用程序通过HTTP协议进行通信。
AJAX：异步JavaScript和XML的缩写，是一种在不重新加载整个网页的情况下与服务器交换数据并更新部分网页的技术。
Fetch API：现代浏览器提供的用于进行网络请求的API，它提供了一个JavaScript Promise对象来处理请求。

类型

GET：请求数据。
POST：提交数据。
PUT：更新数据。
DELETE：删除数据。

应用场景

动态网页：实时显示数据，如股票价格、新闻更新等。
单页应用（SPA）：整个应用作为一个网页运行，通过AJAX加载内容。
表单提交：无需刷新页面即可提交表单数据。

示例代码

以下是一个简单的示例，展示如何使用JavaScript的Fetch API从REST API获取数据，并在HTML页面上显示这些数据。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fetch API Example</title>
</head>
<body>
<h1>用户列表</h1>
<ul id="user-list"></ul>

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

JavaScript部分（app.js）

document.addEventListener('DOMContentLoaded', function() {
    fetch('https://api.example.com/users') // 替换为实际的API地址
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            const userList = document.getElementById('user-list');
            data.forEach(user => {
                const li = document.createElement('li');
                li.textContent = `${user.name} - ${user.email}`;
                userList.appendChild(li);
            });
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
});