使用 Laravel 和 jQuery 实现无限滚动

// in your usercontroller
public function index(request $request)
{
    $users = user::paginate(10); // paginate the results, 10 per page

    if ($request->ajax()) {
        return view('users.partials.users_list', compact('users'))->render();
    }

    return view('users.index', compact('users'));
}

@extends('layouts.app')

@section('content')
<div id="user-list">
    @include('users.partials.users_list', ['users' => $users])
</div>
<div id="loading" style="text-align:center; display:none;">
    <p>loading more users...</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11168">
                            <img src="https://img.php.cn/upload/webcode/000/000/008/176519520225383.jpg" alt="Shoping购物网源码">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11168">Shoping购物网源码</a>
                            <p>该系统采用多层模式开发，这个网站主要展示女装的经营，更易于网站的扩展和后期的维护，同时也根据常用的SQL注入手段做出相应的防御以提高网站的安全性，本网站实现了购物车,产品订单管理，产品展示，等等，后台实现了动态权限的管理，客户管理，订单管理以及商品管理等等，前台页面设计精致，后台便于操作等。实现了无限子类的添加，实现了动态权限的管理，支持一下一个人做的辛苦</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Shoping购物网源码">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11168" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Shoping购物网源码">
                        </a>
                    </div>
                
</div>
@endsection

@foreach($users as $user)
<tr>
    <td>{{ $user->name }}</td>
    <td>{{ $user->email }}</td>
</tr>
@endforeach

$(document).ready(function() {
    let page = 1;

    $(window).scroll(function() {
        if ($(window).scrolltop() + $(window).height() >= $(document).height() - 100) {
            page++;
            loadmoredata(page);
        }
    });

    function loadmoredata(page) {
        $.ajax({
            url: '?page=' + page,
            method: 'get',
            beforesend: function() {
                $('#loading').show();
            },
            success: function(data) {
                if (data.trim() === "") {
                    return;
                }
                $('#loading').hide();
                $('#user-list').append(data);
            },
            error: function(xhr) {
                console.log(xhr.responsetext);
            }
        });
    }
});

@section('scripts')
<script src="{{ asset('js/infinite-scroll.js') }}"></script>
@endsection`