How to implement infinite ajax scroll pagination in Laravel - php

Question

I want to use infinite ajax scroll pagination for my blog, but unfortunately I do not have a result!? I still get this error message : server not responding...
Below the code used.
controller:
$posts =Post::paginate(5);
if ($request->ajax()) {
$view = view('user.list.data', compact('posts'))->render();
return response()->json(['html'=>$view]);
}
return view('user.list.page', compact('posts');
view:
<div class="container">
<h2 class="text-center">Liste poste</h2>
<br/>
<div class="col-md-12" id="post-data">
#include('user.list.data')
</div>
</div>
<div class="ajax-load text-center" style="display:none">
<i class="fa fa-spinner fa-spin" style="color: #dd4b39; font-size:36px"></i>
</div>
<script type="text/javascript">
var page = 1;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
page++;
loadMoreData(page);
}
});
function loadMoreData(page) {
$.ajax({
url: '?page=' + page,
type: "get",
beforeSend: function() {
$('.ajax-load').show();
}
}).done(function(data) {
if(data.html == " ") {
$('.ajax-load').html("No more records found");
return;
}
$('.ajax-load').hide();
$("#post-data").append(data.html);
}).fail(function(jqXHR, ajaxOptions, thrownError) {
alert('server not responding...');
});
}
</script>
view data:
#foreach($posts as $post)
<div>
<h3>
{{ $post->title }}
</h3>
<p>{{ $post->description }}</p>
<div class="text-right">
<button class="btn btn-success">Read More</button>
</div>
<hr style="margin-top:5px;">
</div>
#endforeach