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

Question

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

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

您会在下面找到我迄今为止编写的代码。问题是只有两个按钮加载，但没有加载包含信息的表格。您知道错误可能是什么吗？

<!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;
}

Answer 1

我想如果你查看控制台，你会看到关于

$(...).ready()

不是函数的错误，因为你没有加载 jQuery。

执行此操作时，您正在声明变量

src

、

integrity

和

crossorigin

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

您希望它们作为脚本标签上的属性，就像这样

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

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1