使用 Pokémon API 创建新页面显示更多信息-js教程-PHP中文网

使用 Pokémon API 创建新页面显示更多信息

霞舞

发布： 2025-08-05 16:18:01

原创

334人浏览过

使用 pokémon api 创建新页面显示更多信息

本文档将指导您如何使用 Pokémon API，在点击“更多信息”按钮后，将特定 Pokémon 的详细信息展示在一个新的 HTML 页面中。我们将利用 URL 查询参数传递 Pokémon 的 ID，并在新页面中获取并显示这些信息。

通过 URL 查询参数传递 Pokémon ID

为了在新页面中显示特定 Pokémon 的详细信息，我们需要一种方法来告诉 details.html 页面要显示哪个 Pokémon。最常用的方法之一是使用 URL 查询参数。

在 index.html 的 App.js 文件中，修改 seeDetail 函数，将 Pokémon 的 ID 作为查询参数添加到 details.html 的 URL 中：

function seeDetail(id){
    window.open('details.html?id=' + id, '_blank');
}

登录后复制

现在，当点击“更多信息”按钮时，details.html 页面将在新的标签页中打开，并且 URL 将包含 Pokémon 的 ID，例如：details.html?id=25。

在 details.html 中获取并显示 Pokémon 详细信息

接下来，我们需要在 details.html 页面中获取 URL 查询参数中的 Pokémon ID，并使用该 ID 从 Pokémon API 获取详细信息。

在 details.html 页面中，添加以下 JavaScript 代码：

<div id="details">
    <h2>Pokemon Details</h2>
    <div class="more-details"></div>
</div>
<script>
const moreDetails = document.querySelector(".more-details");
function detailsPokemon(poke) {
    moreDetails.innerHTML = `
        <div class="card-pokemon">
            <span>ID: ${poke.id}</span>
            <h2 class="pokemon-nombre">${poke.name}</h2>
        </div>
    `;
}
const endPoint = "https://pokeapi.co/api/v2/pokemon/";
fetch(endPoint + new URLSearchParams(location.search).get('id'))
    .then((response) => response.json())
    .then(data => detailsPokemon(data))
</script>

登录后复制

这段代码首先获取 more-details 元素的引用，该元素将用于显示 Pokémon 详细信息。然后，定义了一个 detailsPokemon 函数，该函数接收一个 Pokémon 对象并将其详细信息添加到 more-details 元素中。

面多多

面试鸭推出的AI面试训练平台

查看详情

最重要的是，代码使用 new URLSearchParams(location.search).get('id') 从 URL 查询参数中获取 Pokémon ID。然后，使用该 ID 从 Pokémon API 获取 Pokémon 详细信息，并调用 detailsPokemon 函数来显示这些信息。

完整示例

以下是完整的 index.html 和 details.html 文件：

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Pokemon List</title>
</head>
<body>
    <main>
        <div>
            <button id="btn-pokemon" type="button">Click to see Pokemon</button>
        </div>

        <div class="card" id="details" >
            <div class="more-details"></div>
        </div>

        <div class="container-pokemon" id="cardPokemon"></div>

    </main>

    <script>
        const cardPokemon = document.querySelector("#cardPokemon");
        const cardDetalle = document.querySelector('#detalle');
        const details = document.querySelector('.more-details');
        const btnPokemon = document.querySelector('#btn-pokemon');

        const endPoint = "https://pokeapi.co/api/v2/pokemon/";

        function showPokemon(poke) {

            let tipoDePokemon = poke.types.map((type) => `<p>${type.type.name}</p>`);
            tipoDePokemon = tipoDePokemon.join('');

            let abilitiesPokemon = poke.abilities.map((ability) => `<p>${ability.ability.name}</p>`);
            abilitiesPokemon = abilitiesPokemon.join('');

           const containerPokemon = document.createElement("div");

           containerPokemon.innerHTML = `
                <div class="card-pokemon">
                    <span>${poke.id}</span>
                    <div class="img">
                        <img src="${poke.sprites.other["official-artwork"].front_default}" alt="${poke.name}">
                    </div>
                    <div class="info">
                        <div>
                            <h2>${poke.name}</h2>
                            <div>
                                <p>Tipo de Pokemon:</>
                                ${tipoDePokemon}
                                <p>base_experience:</>
                                ${poke.base_experience}
                            </div>
                            <div>
                                <p class="stat">${poke.height}m</p>
                                <p class="stat">${poke.weight}kg</p>
                            </div>
                    </div>
                    <button class="btn-detalle" onclick="seeDetail(${poke.id})"> MORE INFO </button> 

                </div>
            `;
            cardPokemon.append(containerPokemon)
        }

        function seeDetail(id){
            window.open('details.html?id=' + id, '_blank');
        }


        btnPokemon.addEventListener('click', function() {

            for (let i = 1; i <= 100; i++) {
                fetch(endPoint + i)
                .then((response) => response.json())
                .then(data => showPokemon(data))
            }

        })
    </script>
</body>
</html>

登录后复制

details.html

<!DOCTYPE html>
<html>
<head>
    <title>Pokemon Details</title>
</head>
<body>
    <div id="details">
        <h2>Pokemon Details</h2>
        <div class="more-details"></div>
    </div>
    <script>
        const moreDetails = document.querySelector(".more-details");
        function detailsPokemon(poke) {
            moreDetails.innerHTML = `
                <div class="card-pokemon">
                    <span>ID: ${poke.id}</span>
                    <h2 class="pokemon-nombre">${poke.name}</h2>
                </div>
            `;
        }
        const endPoint = "https://pokeapi.co/api/v2/pokemon/";
        fetch(endPoint + new URLSearchParams(location.search).get('id'))
            .then((response) => response.json())
            .then(data => detailsPokemon(data))
    </script>
</body>
</html>

登录后复制

总结

通过使用 URL 查询参数，我们能够轻松地将 Pokémon ID 从 index.html 传递到 details.html，并在新页面中显示特定 Pokémon 的详细信息。这种方法简单有效，并且易于理解和实现。记住要确保你的 details.html 文件能够正确地从 URL 中提取 ID 并使用它来获取数据。

以上就是使用 Pokémon API 创建新页面显示更多信息的详细内容，更多请关注php中文网其它相关文章！