Question

我正在尝试从API动态显示数据，到目前为止一切正常，除了＆＃34; Next＆＃34;和＆＃34;以前＆＃34;链接（部分是因为我可以让它更新搜索栏中的值计数。我的问题是，当我点击Search按钮时，我将如何执行我的初始点击事件，显示API数据当我点击“下一个”或“之前的”链接时？对不起凌乱的代码抱歉，这只是为了学习目的。

HTML：

<html>
<head>
    <title>Pokemon API</title>
    <link href="https://fonts.googleapis.com/css?family=Fredoka+One|Pacifico" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

*{
margin: 0;
padding: 0;
}

body{
background-color: lightgray;
}

a{
text-decoration: none;
}

h1{
text-align: center;
font-family: 'Fredoka One', cursive;
color: gray;
font-weight: bold;
padding-bottom: 50px;
}

input, button{
text-align: center;
width: 100%;
height: 50px;
border-style: groove;
border-color: grey;
}
button{
background-color: lightblue;
}

#next{
float: right;
margin-right: 35%;
margin-bottom: 20%;
}
#last{
float: left;
margin-left: 35%;
margin-bottom: 20%;
}

img{
display: block;
margin: auto;
padding: auto;
height: 168px;
width: 340px;
}

#content{
display: block;
border-style: groove;
border-color: grey;
text-align: center;
font-size: 20px;
border-top: none;
}

</style>

</head>
<body>
    <header>
    <img src="https://vignette3.wikia.nocookie.net/leonhartimvu/images/7/71/Pok%C3%A9mon_Pok%C3%A9ball_Logo.png/revision/latest/scale-to-width-down/640?cb=20131021210645">
    <h1>Search Pokemon Database</h1>
    </header>   

    <input type="text" name="pokemon" id="pokemon" value="1">
    <br />
    <br />
    <button id="search">Search</button>
     <div id="content">

    </div>
    <br />
    <h4 id="last"><a href="">Previous Pokemon</a></h4>
    <h4 id="next"><a href="">Next Pokemon</a></h4>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Ajax和JQuery：

$("document").ready(function(){

    //main click event handler
    $("#search").click(function(){
        //fetch API data and display it on the content div
        var pokemon = $("#pokemon").val();
        var url = "http://pokeapi.co/api/v2/pokemon/" + pokemon;

        $.ajax({
            type: "GET",
            dataType: 'json',
            cache: false,
            url: url,
            success: function (data) {

                $("#content").empty();

                $("#content").append("<br /> <label>Pokemon Name:</label>" + " " + data.name);
                $("#content").append("<br /><label>Base Experience:</label>" + " " + data.base_experience);
                $("#content").append("<br /><label>Height:</label>" + " " + data.height);
                $("#content").append("<br /><label>Weight:</label>" + " " + data.weight);
            }
        });
    });

    //Next and privious event handlers
    $("#next").click (function (e) {
        e.preventDefault();
        currentPage =parseInt ($("#pokemon").val());
        nextPage = (currentPage + 1);
        $("#pokemon").val(nextPage);

    });

    $("#last").click (function (e) {
        e.preventDefault();
        currentPage = parseInt ($("#pokemon").val());
        if (currentPage > 0) {
            nextPage = (currentPage - 1);
        }
        else {
            nextPage = pageCount - 1;
        }

        $("#pokemon").val(nextPage);

    });
});

Answer 1

如果我理解正确，那么我猜你只需要在$("#search").click()和next处理程序中拨打privious。

//Next and privious event handlers
    $("#next").click (function (e) {
        e.preventDefault();
        currentPage =parseInt ($("#pokemon").val());
        nextPage = (currentPage + 1);
        $("#pokemon").val(nextPage);

        //call the search
        $("#search").click();
    });

    $("#last").click (function (e) {
        e.preventDefault();
        currentPage = parseInt ($("#pokemon").val());
        if (currentPage > 0) {
            nextPage = (currentPage - 1);
        }
        else {
            nextPage = pageCount - 1;
        }

        $("#pokemon").val(nextPage);

        //call the search
        $("#search").click();
    });

使用AJAX和JQuery动态操作JSON API数据

1 个答案: