如何通过API分段展示数据？实现按钮触发分页加载国家列表

修改后的完整代码 #

HTML部分（无需改动）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <section>
        <div class="container mt-5">
            <div class="row g-5"></div>

        </div>
    </section>


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

</html>

JavaScript部分

const row = document.querySelector('.row');
const buttons = document.querySelectorAll('button');
let allCountries = []; // 存储所有国家数据

// 渲染指定区间的国家卡片
function renderCountries(start, end) {
    let card = "";
    // 截取对应区间的数据（slice为左闭右开）
    const displayData = allCountries.slice(start, end);
    displayData.forEach(item => {
        card += `
        <div class="col-md-4">
            <div class="card">
                <img height="300" src="${item.flags.png}" class="card-img-top" alt="${item.name.common}国旗">
                <div class="card-body">
                    <h5 class="card-title">${item.name.common}</h5>
                    <p class="card-text">${item.capital ? item.capital[0] : '无首都'}</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
        `;
    });
    row.innerHTML = card;
}

// 获取API数据并初始化按钮事件
fetch('https://restcountries.com/v3.1/all')
    .then(res => res.json())
    .then(data => {
        allCountries = data;
        // 初始渲染第一页（前50个国家）
        renderCountries(0, 50);
        
        // 给每个按钮绑定点击事件
        buttons.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                const start = index * 50;
                const end = start + 50;
                renderCountries(start, end);
            });
        });
    });

核心改动说明 #

• 新增allCountries变量缓存所有国家数据，避免重复请求API，提升页面响应速度。
• 封装renderCountries函数，专注于生成指定区间的卡片HTML并渲染，让代码更易维护和复用。
• 给每个按钮绑定点击事件，通过按钮索引计算数据区间：按钮1（索引0）对应0-50，按钮2（索引1）对应50-100，以此类推。
• 处理了部分国家无首都的情况，避免页面显示undefined，优化用户体验。
• 页面加载完成后自动渲染第一页数据，无需用户手动触发。

内容的提问来源于stack exchange，提问作者Pasha