Javascript 使用ajax分页可以工作，但下一页显示所有左侧页面，而不是一次只显示一个页面

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

//需要自动加载的post home

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

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

@foreach（$posts作为$post）
{{$post->user->username}
....
@endforeach
{{$posts->links（）}

//ajaxPost ajax/products页面

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

 {{$posts->links()}}

@foreach（$posts as$post）
{{$post->user->username}
....
@endforeach
{{$posts->links（）}

//jquery ajax代码

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;


    }
});

var-page=1；
功能产品（第页）{
log（'get products for page='+page）；
$.ajax({
网址：'http://localhost/html5lav/public/ajax/products?page=“+第页
})
.完成（功能（数据）{
如果（数据！=''）{
控制台日志（数据）；
$（'.articleList'）。追加（数据）；
location.hash=页面；
flag=true；
$（'.pagination'）.hide（）；
}否则{
$（'No more feed'）.insertBefore（'.pagination'）；
$（'.pagination'）.remove（）；
}  
})
}
$（文档）.on（'单击'，'）。分页li:最后一个子项a'，函数（e）{
e、 预防默认值（）；
//console.log（$（this.attr（'href'）.split（'page='））；
//var page=$（this.attr（'href'）.split（'page='）[1]；
采购产品（第页）；
});
var标志=真；
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）==$（文档）.height（））{
页码=页码+1；
var active=$（'.pagination li:last child'）。hasClass（'active'）；
如果（标志&激活）{
flag=false；
$（'.pagination li:last child a'）。触发器（'click'）；
}
//返回；
}
});

使用时。追加每次单击li:last a.时，代码都会追加数据。。因此，您可以使用.html（）而不是.append（）。。或者设置一个条件，比如将每个加载的页面放在div中，只显示您需要的div@Mohamed，我需要它像twitter一样将其附加到底部，如果使用html，则原始内容将被删除。您需要检查是否正确限制了查询，由于您没有放入php代码，我们无法告诉您在使用时问题在哪里。追加代码将在每次单击li:last a.时追加数据。。因此，您可以使用.html（）而不是.append（）。。或者做一个条件，比如把每个加载的页面放在div中，只显示你需要的div@Mohamed，我需要它像twitter那样将它附加到底部，如果使用html，那么原始内容就可以了。你需要检查你是否正确地限制了你的查询，因为你没有把你的php代码放进去，我们无法告诉你问题出在哪里