How to implement infinite ajax scroll pagination in Laravel

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>
        <a href="">{{ $post->title }}</a>
    </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