Javascript 无限滚动：使用Ajax调用加载更多数据？

我正在尝试实现一个显示用户名、地址和电子邮件的无限滚动表。首先，我导入了json服务器包，并在名为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

var faker=require（'faker'））
函数生成器（）{
var用户=[]；
var加载=真；
对于（var i=0；i您的javascript中有一些输入错误，请尝试使用下面的代码（我给您写了一些注释和建议）

var currentPageNumber=1；//在所有函数之前初始化
$（文档）.ready（函数（）{
loadMore（当前页码）；
});
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））{
currentPageNumber++；//在再次调用loadMore（）之前递增1
loadMore（当前页码）；
}
});
函数loadMore（当前页）{
$.ajax({
方法：“获取”，
url:“http://localhost:3000/users?_page=“+当前页，
数据类型：“json”，
cache:false，//避免浏览器缓存ajax请求
成功：功能（数据）{
$.each（数据，函数（键，val）{//使用jQuery.each，更简单、更干净
$（'tbody'）.append（“+val.name+”）+
val.email+“”
+val.city+，“+val.country+”）；
});
},
错误：函数（数据）{
log（“出了问题！”）
}
});
}
loadMore
是否多次被调用？也许您触发
loadMore
的逻辑有缺陷-而且，我认为在调用
loadMore
loadMore（）之前，您需要
currentPageNumber+=1；
每当用户到达页面末尾时触发。但是json服务器只创建固定数量的数据点（在本例中为50）。因此loadMore（）50个数据点加载完毕后停止工作…啊，我现在明白了。对不起，我以为您显示的服务器端代码
generateUsers
每次点击
http://localhost:3000/users?_page=
-我的错-不清楚如何使用
generateUsers
在您共享的代码片段中，您是对的。我在想是否可以将generateUsers导入主文件（我在主文件中编写了ajax调用逻辑）在成功函数之后，使用generateUsers获得另一组50多个用户？当用户点击页面末尾时，请求是否真的发生？结果是否与您期望的结果匹配？可能只是append.Btw有问题。“last”参数用于什么？我看不出它有任何用途
$(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!");
            }

    })
}

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

}