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

Question

我已将 infinite-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...");
                
                });
            }

Controller :

    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

single scroll causing 10s of request !

实际上，即使是“轻触”，滚动事件也会触发太多次，这会创建许多对相同过滤条件的请求，您需要使用一些 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 因为你需要将最深的滚动值存储在某个变量中并使用它比较使用是否比以前滚动得更深

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