提问人:Benedikt Faude 提问时间:11/1/2023 更新时间:11/1/2023 访问量:36
使用 Ajax 和分页重新加载动态数据
Dynamic data reloading with Ajax and pagination
问:
我正在尝试从 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;
}
答:
0赞
leitning
11/1/2023
#1
我想如果你看一下控制台,你会看到关于不是函数的错误,因为你没有加载jQuery。$(...).ready()
您正在声明变量,当您执行此操作时src
integrity
crossorigin
<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>
评论