仅在单击“下一步”按钮时，才移动到分页API中的下一页，直到到达最终页(totalPages)为止。
我正在使用的TMDB搜索API，其中有各自的电影数据，即名称，图像，descrp。所以当我搜索关键字"New“时，API会返回所有电影，其中包含"New”这个词。API是分页的，每页只返回20个结果。另外，我的HTML也是分页的，每页显示20个结果。我想要实现的是，当我单击HTML分页的next按钮时，应该用&page=2触发API，并在HTML 2上呈现API 2的结果。
从API的第一页检索数据的代码。
const searchMovies = function (searchValue) {
let page = 1;
do {
fetch(searchAPIURL + "&query=" + searchValue + `&page=${page}`)
.then((response) => response.json())
.then((data) => {
console.log(data);
let totalPages = data.total_pages;
let searchResults = data.results;
console.log(searchResults);
searchMovieInit(searchResults);
});
} while (totalPages);
};下一个按钮
const nextBtn = document.getElementById("next-btn");回答 1
Stack Overflow用户
发布于 2021-12-31 11:32:28
我将禁用类添加到所有-1中，并将禁用类移除到当前页面前面的任何内容。每当有人单击next按钮时，pageCall就会被调用，该按钮接受下一个数字，并以"https://api.themoviedb.org/3/trending/tv/week?api_key=###&page=2“作为url回忆getmovies函数。
pageCall函数将url拆分为"https://api.themoviedb.org/3/trending/tv/week?“中的"api_key=###&page=2”，这使得数组url拆分，然后将"api_key=###&page=2“(在"api_key=###”中为urlspilt1 )和"page=2“(称为queryParams )拆分，然后接受查询并拆分具有queryparams长度的查询- lenght -1。
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const current = document.getElementById("current");
let currentPage = 1;
let NextPage = 2;
let prevPage = 3;
let lastUrl = "";
let totalpages = 100;
function getMovies(url) {
lastUrl = url;
fetch(url)
.then(res => res.json())
.then(data =>
if (data.length !== 0) {
showMovies(data.results);
currentPage = data.page;
NextPage = currentPage + 1;
prevPage = currentPage - 1;
totalpages = data.total_pages;
current.innerText = currentPage;
if (currentPage <= 1) {
prev.classList.add("disabled");
next.classList.remove("disabled");
} else if (currentPage >= totalpages) {
prev.classList.remove("disabled");
next.classList.add("disabled");
} else {
prev.classList.remove("disabled");
next.classList.remove("disabled");
}
}
});
}
next.addEventListener("click", () => {
if (NextPage <= totalpages) {
pageCall(NextPage);
}
});
prev.addEventListener("click", () => {
if (prevPage > 0) {
pageCall(prevPage);
}
});
function pageCall(page) {
let urlsplit = lastUrl.split("?");
let queryParams = urlsplit[1].split("&");
let key = queryParams[queryParams.length - 1].split("=");
if (key[0] != "page") {
let url = lastUrl + "&page=" + page;
getMovies(url);
} else {
key[1] = page.toString();
let a = key.join("=");
queryParams[queryParams.length - 1] = a;
let b = queryParams.join("&");
let url = urlsplit[0] + "?" + b;
getMovies(url);
}
}
https://stackoverflow.com/questions/70445323
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号