亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用“加載更多”按鈕加載 API 數據的下一頁?

如何使用“加載更多”按鈕加載 API 數據的下一頁?

開心每一天1111 2023-12-14 15:26:22
我的目標是從 API https://reqres.in/api/users?page= 渲染一些用戶數據(如果頁面可用,這可以是 1,2 或更多)并使用 JS / Promises 將其輸出到 html 表。因此,最初我已經設法將第一頁的數據添加到表中,現在我需要對其進行修改,當我單擊“加載更多”按鈕時,它應該刪除表中的當前數據并顯示第 2 頁的數據。這是我到目前為止的代碼let userDataTable = document.getElementById("userData");var tot_pages;let pagesCount = 1;console.log(tot_pages);let getUSerInfo = function () {  fetch(`https://reqres.in/api/users?page=${pagesCount}`)    .then((response) => response.json())    .then((people) => {      let users = people.data;      tot_pages = people.total_pages;      console.log(users);      console.log(tot_pages);      for (let i = 0; i < users.length; i++) {        let htmlContent = `<tr><td>${users[i].id}</td><td><img src="${users[i].avatar}"/></td><td>${users[i].first_name}</td><td>${users[i].last_name}</td><td>${users[i].email}</td></tr>`;        userDataTable.insertAdjacentHTML("beforeend", htmlContent);      }    })    .catch(function (error) {      console.log(error);    });};getUSerInfo();console.log(tot_pages);document  .getElementById("load_btn")  .addEventListener("click", () => getUSerInfo());另外,當沒有剩余頁面可供加載時(例如:當最后一頁的數據顯示在表格中時,“加載更多”按鈕不應該可見)我將解釋我的想法是如何實現此任務的:我試圖創建一個全局變量(tot_pages),將其初始化為 1。然后在承諾中,我試圖分配通過 reqres.in 渲染的對象的總頁數并將其作為計數器或其他東西返回給按鈕。因此,作為前例:當我單擊按鈕時,計數器將會增加(在這種情況下,tot_pages 變量將會增加)。無論如何,經過幾個小時的嘗試,我自己還無法完成這項工作。如果有人能幫助我,我真的很感激。感謝您的時間和考慮!
查看完整描述

1 回答

?
鳳凰求蠱

TA貢獻1825條經驗 獲得超4個贊

我認為您的代碼可以pagesCount在每次成功的 API 獲取上更新變量時正常工作,請檢查此更新的代碼。我更改了一些變量名稱


let totalPages,

    currentPage = 0,

    loadMoreBtn = document.getElementById("load_btn");


// bind load more button

loadMoreBtn.addEventListener("click",getUSerInfo);


// fetch people

 function getUSerInfo() {

    // ignore if all data has been loaded

    if(currentPage >= totalPages) return

    

    const nextPage = currentPage + 1;

    fetch(`https://reqres.in/api/users?page=${nextPage}`)

        .then((response) => response.json())

        .then((people) => {

             const users = people.data,

             userDataTable = document.getElementById("userData");


             totalPages = people.total_pages;


             // hide load more button

             if(totalPages == nextPage) loadMoreBtn.style.visibility = 'hidden';


             // udate table data

             for (let i = 0; i < users.length; i++) {

                 let htmlContent = `<tr><td>${users[i].id}</td><td><img src="${users[i].avatar}"/></td><td>${users[i].first_name}</td><td>${users[i].last_name}<  /td><td>${users[i].email}</td></tr>`;

                  userDataTable.insertAdjacentHTML("beforeend", htmlContent);

             }


             currentPage = nextPage;

        })

        .catch(function (error) {

             console.log(error);

        });

    };


 // fetch initial page

 getUSerInfo();


查看完整回答
反對 回復 2023-12-14
  • 1 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號