Ajax动态数据加载与分页故障：动物速度API表格无法渲染

我正尝试从API获取动物及其速度信息，需将数据展示在表格中，目前页面仅加载出「Prev」和「Next」分页按钮，表格无数据显示。

HTML代码 #

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
        integrity="sha384-1srTifKwwmIWHsyIaapyeJQY2XxzfjIHpftPvwHSi97Mfm4cZNKDBAdVSrtRvti5" crossorigin="anonymous">
    <script> src = "https://code.jquery.com/jquery-3.7.1.min.js"
        integrity = "sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
        crossorigin = "anonymous"
    </script>
</head>

<body class="text-center">
    <br />
    <button class="btn btn-primary btn-lg" id="prev">Prev</button>
    <button class="btn btn-primary btn-lg" id="next">Next</button>
    <br />
    <table id="table" class="table table-striped table-striped table-hover">
        <tbody id="tableBody" />
    </table>
    <script src=" myScript.js">
    </script>
</body>

</html>

myScript.js代码 #

$(document).ready(function () {

    /*Variablen  */
    var counter = -5;
    var end = false;

    $("#next").click(function () {
        if (!final) {
            counter = counter + 5;
        }
        $.get("http://localhost:8080/webService/api/velocitiespagination?start=" + counter, function (velocities) {
            createTable(velocities);
        });
    });
    $("#prev").click(function () {
        counter = counter - 5;
        if (counter < 5){
            counter = 0;
        }
        $.get("http://localhost:8080/webService/api/velocitiespagination?start=" + counter, function (velocities) {
            createTable(velocities);
        });
    });


    createTable(velocities);
});

function createTable(velocities) {
    var text = "<tbody><tr><th>Tier</>/th><th>Maximalgeschwindigkeit Tier</th></tr>";
    $.each(velocities, function (key, velocity) {
        text = text + "<tr><td>" + velocity.animal + "</td><td>" + velocity.velocity + "</td></tr>";
    });
    text += "</tbody>"
    $("#myTable").html(text);

    end = velocities.length === 0;
}

问题修复方案 #

表格无数据是因为代码存在多处错误，逐一修正如下：

1. 修复jQuery引入方式
   原script标签写法错误，导致jQuery未加载，改为：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js"
       integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
       crossorigin="anonymous"></script>
   

2. 初始化加载第一页数据
   页面加载时直接调用createTable(velocities)但变量未定义，且未发起初始请求，修改初始化逻辑：

   $(document).ready(function () {
       var counter = 0;
       var end = false;
   
       // 首次加载第一页
       $.get("http://localhost:8080/webService/api/velocitiespagination?start=" + counter, function (velocities) {
           createTable(velocities);
       });
   
       // 其余点击逻辑保留
   });
   

3. 修正变量名错误
   next按钮中使用未定义的final，替换为end：

   $("#next").click(function () {
       if (!end) {
           counter = counter + 5;
       }
       // 请求逻辑保留
   });
   

4. 修复DOM选择器与标签错误
   createTable函数中选择器错误，且th标签闭合错误，修改为：

   function createTable(velocities) {
       var text = "<tr><th>Tier</th><th>Maximalgeschwindigkeit Tier</th></tr>";
       $.each(velocities, function (key, velocity) {
           text += "<tr><td>" + velocity.animal + "</td><td>" + velocity.velocity + "</td></tr>";
       });
       $("#tableBody").html(text);
   
       end = velocities.length === 0;
   }
   

5. 修正分页逻辑
   prev按钮的counter重置条件错误，改为：

   $("#prev").click(function () {
       counter = counter - 5;
       if (counter < 0){
           counter = 0;
       }
       // 请求逻辑保留
   });
   

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