無限滾動：通過Ajax調用加載更多數據嗎？

Question

我正在嘗試實現一個無限滾動表，以顯示用戶的姓名，地址和電子郵件。 首先，我導入了json-server程序包，並在一個名為users.js的單獨文件中使用fakerjs創建了一個API端點，以便在localhost上提供服務：

var faker = require('faker')

function generateUsers () {
  var users = [];
  var loading = true;
  for(var i=0;i<50;i++) {
    var name = faker.name.findName()
    var email = faker.internet.email()
    var city = faker.address.city()
    var country = faker.address.country()
    users.push({
      "name": name,
      "email": email,
      "city": city,
      "country": country
    })
  }
  return { "users": users }
}
module.exports = generateUsers

我的問題是“每次滾動到頁面末尾時如何加載另一批50個用戶？”在初始加載時，它僅按user.js文件中的指定加載50個用戶。 我本以為可以在ajax成功函數中將更多數據推入用戶數組，但是我不確定如何實現它。

$(document).ready(function(){
    var currentPageNumber = 1;
    loadMore(currentPageNumber);
$(window).scroll(function() {

    if($(window).scrollTop() ==  $(document).height()- $(window).height())
    {

        loadMore(currentPageNumber);
        currentPageNumber +=1;
    }
  });
    function loadMore(currentPage){
        $.ajax({
            method: "GET",
            url: "http://localhost:3000/users?_page="+ currentPage,
            dataType: 'json',
            success: function(data) {
                var  last = data[data.length-1];
                    for(var i=0;i<data.length;i++) {

                       $('tbody').append("<tr><td>"+ data[i].name+"</td><td>"+ 
                       data[i].email+"</td><td>" 
                       + data[i].city + "," + data[i].country+ "</td></tr>")




            },
            error: function(data) {
                    console.log("Something went wrong!");
            }

    })
}

Answer 1

您的javascript中有一些錯別字，請嘗試下面的代碼（我給您一些建議和建議）

var currentPageNumber = 1; // initialization before all functions

$(document).ready(function(){
    loadMore(currentPageNumber);
});

$(window).scroll(function() {
    if( $(window).scrollTop() == $(document).height() - $(window).height() ){
        currentPageNumber++; //increment by one before calling again loadMore()
        loadMore(currentPageNumber);
    }
});

function loadMore(currentPage){

    $.ajax({
        method: "GET",
        url: "http://localhost:3000/users?_page="+ currentPage,
        dataType: 'json',
        cache: false, //avoid browser cache ajax requests
        success: function(data) {

            $.each(data, function(key, val) { // use jQuery.each, easier and clean

                $('tbody').append("<tr><td>"+ val.name+"</td><td>"+ 
                val.email+"</td><td>" 
                + val.city + "," + val.country+ "</td></tr>");

            });

        },
        error: function(data) {
            console.log("Something went wrong!")
        }
    });

}