使用ajax的异教徒可以工作，但下一页显示所有左页，而不是一次只显示一页

Question

我做了一个laravel网站，使用laravel的分页和jquery ajax在滚动到底部时加载下一页。
它确实成功了，但下一页只是加载所有左侧内容而不是一次加载一页。除此之外，当我向下滚动时，它会继续加载，它只是不停止。我不知道它有什么问题。

//发布需要自动加载的主页

  <section class="mainContent">
      @foreach($posts as $post)
         <article class="articleList">
              {{$post->user->username}}
               ....
         <article>
      @endforeach
   </section>

   <section class="postHomeBottom">
       {{$posts->links()}}    
    </section>

// ajaxPost ajax / products page

  @foreach($posts as $post)
     <article class="articleList">
          {{$post->user->username}}
           ....
     <article>
  @endforeach

 {{$posts->links()}}

// jquery ajax code

var page = 1;

function getProducts(page){
    console.log('getting products for page = ' + page);
    $.ajax({
        url: 'http://localhost/html5lav/public/ajax/products?page=' + page
    })
    .done(function(data){
      if(data != ''){
            console.log(data);
            $('.articleList').append(data);
             location.hash = page;

              flag = true;

            $('.pagination').hide();          
      }else{
            $('<div class="well">No more feeds</div>').insertBefore('.pagination');
            $('.pagination').remove();       
      }  

    })


}

$(document).on('click','.pagination li:last-child a', function(e){

    e.preventDefault();
    //console.log($(this).attr('href').split('page='));
    //var page = $(this).attr('href').split('page=')[1];
    getProducts(page);


});



var flag = true;

$(window).scroll(function(){


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

          page =page + 1;

           var active = $('.pagination li:last-child').hasClass('active');

           if(flag && !active){
              flag = false;
              $('.pagination li:last-child a').trigger('click');
           }
           //return;


    }
});