使用 Ajax 和分页重新加载动态数据

Dynamic data reloading with Ajax and pagination

提问人:Benedikt Faude 提问时间:11/1/2023 更新时间:11/1/2023 访问量:36

问:

我正在尝试从 API 中获取有关动物及其速度的信息。

enter image description here

信息应保存在包含 5 列的表中。它应该看起来像这样:

enter image description here

你会在下面找到我到目前为止写的代码。问题是只加载了两个按钮,而不是加载了包含信息的表。你知道错误可能是什么吗?

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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;
}
javascript html json ajax bootstrap-4

评论

0赞 Karakuchi 11/1/2023
控制台中是否显示任何错误?
0赞 fritz craft 11/1/2023
也许是这部分:$(“#myTable”).html(text);示例中的表的 ID 为“table”,而不是“myTable”
0赞 Benedikt Faude 11/1/2023
@Karakuchi没有,我在控制台中没有收到任何错误
0赞 Professor Abronsius 11/1/2023
因为你调用的 api 是不可公开访问的,所以很难实际测试你的代码

答:

0赞 leitning 11/1/2023 #1

我想如果你看一下控制台,你会看到关于不是函数的错误,因为你没有加载jQuery。$(...).ready()

您正在声明变量,当您执行此操作时srcintegritycrossorigin

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

您希望它们作为 script 标签上的属性,如下所示

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