PHP 和 jquery Ajax 和用于过滤的无限滚动

Question

我已将无限 ajax-scroll 应用到我的项目中。这是一个显示一长串 div 的 PHP Laravel 项目。我不想使用分页，而是想让用户通过向下滚动来查看同一页面上的所有结果。我也有一个结果过滤器，效果很好，但是奇怪的是，结果通过过滤出现后，向下滚动会导致出现所有结果，而不考虑当前的过滤器。

任何人都可以就我的最佳方法提出建议吗？我想使用滚动，它可能与 url 相关，但我不知道如何解决这个问题

以下是我目前所拥有的。

// 过滤器

    // Search functions
    function storeSearchAjax() {
        var filters = searchFilters();

        $.ajax({
            method: 'get',
            data: filters,
            url: '/restaurants/search-ajax',
            success: function(data) {
                $('#result').html(data);
            }
        });
    }

    function searchFilters() {
        offerFilter = $(".offerCheckbox:checked").map(function () {
            return $(this).val();
        }).get();

        cuisineFilter = $(".cuisineCheckbox:checked").map(function () {
            return $(this).val();
        }).get();

        freedeliveryFilter = $(".freedeliveryCheckbox:checked").map(function () {
            return $(this).val();
        }).get();

        var filters = {
            "offers" : JSON.stringify(offerFilter),
            "cuisines" : JSON.stringify(cuisineFilter),
            "freedelivery" : JSON.stringify(freedeliveryFilter)
        }

        return filters;
    }

    // Paginate links
    $('#result .pagination li a').click(function(e) {
        e.preventDefault();

        var url = $(this).attr('href');
        var params = $.param(searchFilters());

        window.location = url+'&'+params;
    });


    $('input[name="offers[]"], input[name="cuisines[]"], input[name="freedelivery[]"]').change(function(e) {
        e.preventDefault();
        storeSearchAjax();
    });

          var page = 1;

            $(window).scroll(function() {
                if($(window).scrollTop() + $(window).height() >= $(document).height()) {
                    page++;
                    loadMoreData(page);
                }
            });

            function loadMoreData(page) {
                $.ajax({
                    url: '/restaurants/search?page=' + page,
                    type: "get",
                    beforeSend: function() {
                        $('.ajax-load').show();
                    }
                }).done(function(data) {


                    if(data.html=="") {

                        $('.ajax-load').html("");
                        return;
                    }
                    $('.ajax-load').hide();
                    $(".loading_restaurants").append(data.html);

                }).fail(function(jqXHR, ajaxOptions, thrownError) {
                    $('.ajax-load').html("server not responding...");
                
                });
            }

控制器：

    public function ajaxSearch(Request $request)
   {

       $stores = $this->getStores($request);
  
          Helper::usePaginate();
          $stores = $stores->paginate(15)->setPath('/restaurants/search');
  
          $cuisines = Storecuisine::getStoreCuisines();
          $storedays = Storeday::getStoreDays();
          $storewhours = Storeday::all();
          $isapp_open=Helper::isAppOpen();
  
          return response()->view('store-search.stores_listing', compact('stores','storedays','isapp_open','storewhours','cuisines'));
  }

Answer 1

function loadMoreData(page) {
    var filters = searchFilters();
    $.ajax({
        url: '/restaurants/search?page=' + page,
        data: filters,  // <-- this was missing
        beforeSend: function() {
            $('.ajax-load').show();
        }
    }).done(function(data) {
        if(data.html=="") {
            $('.ajax-load').html("");
            return;
        }
        $('.ajax-load').hide();
        $(".loading_restaurants").append(data.html);
    }).fail(function(jqXHR, ajaxOptions, thrownError) {
        $('.ajax-load').html("server not responding...");
    });
}

更新

$(document).ready(function(){
    storeSearchAjax();
});

更新 2

单次滚动导致 10 秒的请求！

实际上，即使是“轻触”，滚动事件也会触发太多次，为相同的过滤条件创建许多请求，您需要使用一些 deboucing 使用类似 lodash 的库。这样事件触发的频率就会降低，并且不会阻塞浏览器或服务器

添加 lodash 库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script>

删除此代码

  $(window).scroll(function() {
      if($(window).scrollTop() + $(window).height() >= $(document).height()) {
          page++;
          loadMoreData(page);
      }
  });

改为添加这个

window.addEventListener('scroll', _.throttle(function(){
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        page++;
        loadMoreData(page);
    }
}, 500));

更新 3

对于第二个问题，不要在滚动时增加页面，而是在 ajax 成功回调中增加。还有一件事：目前它在做ajax，即使我们向上滚动这是错误的，它应该只在我们向下滚动比上一个最深点更多时才执行ajax，因为你需要将最深的滚动值存储在某个变量中并使用它比较 use 是否比以前滚动得更深

//create on global var say 
var deepestPoint = 0;

window.addEventListener('scroll', _.throttle(function(){
    if( 
       ( $(window).scrollTop() + $(window).height() >= $(document).height() )
       &&  ($(window).scrollTop() > deepestPoint )
    ) {
        page++; //<--Remove this from here
        loadMoreData(page);
        deepestPoint = $(window).scrollTop();
    }
}, 500));

//And then


 }).done(function(data) {
        if(data.html=="") {
           $('.ajax-load').html("");
           return;
        }

        $('.ajax-load').hide();
        $(".loading_restaurants").append(data.html);
        //<--paste here
 }).fail(function(jqXHR, ajaxOptions, thrownError) {
                $('.ajax-load').html("server not responding...");
 });