PHP 和 jquery Ajax 和無限滾動過濾

Question

我已將無限 ajax 滾動應用到我的項目中。 這是一個 PHP Laravel 項目，顯示一長串 div。 我不想使用分頁，而是想讓用戶通過向下滾動來查看同一頁面上的所有結果。 我也有一個結果過濾器，效果很好，但奇怪的是，結果通過過濾出現后，向下滾動會導致出現所有結果，而不考慮當前過濾器。

任何人都可以就我的最佳方法提出建議嗎？ 我想使用滾動，它可能與 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

單個滾動導致 10s 的請求！

實際上，即使對於“輕觸”，滾動事件也會觸發太多次，為相同的過濾條件創建許多請求，您需要使用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...");
 });