Question

我正在尝试使用jQuery和一些Ajax设置自定义无限滚动。这就是我到目前为止所做的：

        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
                $.ajax({
                    type: "POST",
                    url: "posts/view/",
                    data: "",
                    success: function(results){
                        $(".container").after(results);
                    }
                })
            }
        });

这一切都很好，花花公子，但我正在努力想象的是如何获得下一个“设置”或“页面”的数据。我正在使用PHP，在我的函数中，我会有类似getMore（$ page = 1）的东西。但是我如何让jQuery跟踪它当前所在的页面，并知道下一页是哪一页？我应该在jQuery中设置某种增量函数，以便它拉取URL（例如posts / page / 1 /）然后只需将1添加到它通过Ajax传递的url中吗？

我觉得我真的在想这个，有更简单的方法吗？

Answer 1

你可以采用更简单的方式。像这样放一个隐藏的字段

<input type hidden value="1" id="page" />

现在每个ajax发送之前从该隐藏字段中获取pagevalue。并且在每个ajax成功函数之后增加隐藏的fierld值。

$('#page').val(parseInt($('#page').val())+1)

你的ajax电话会是这样的

$(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $.ajax({
                type: "POST",
                url: "posts/view/"+$('#page').val(),
                data: "",
                success: function(results){
                    $('#page').val(parseInt($('#page').val())+1);
                    $(".container").after(results);
                }
            })
        }
    });

Answer 2

只需在滚动闭包内使用页面计数器：

(function(){

    //inner functions will be aware of this
    var currentPage = 0;

    $(window).scroll(function() {

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

         $.ajax({
             type: "GET",
             url: "posts/view/" + currentPage,
             data: "",
             success: function(results){
                 $(".container").after(results);
             }
         })

         currentPage++;

         }

    });

})();

根据您传递的page参数更改服务器脚本。如果没有其他东西可以检索，只需回答一个空体。

顺便说一下，POST不适合检索数据，请改用GET。

获取jquery ajax autoscroll的下一组数据

2 个答案: