jquery - Ajax无限滚动不适用于laravel表

Question

我想在带有 laravel 的页面中显示一个表格，并且我想添加无限滚动以在滚动后加载更多行。我正在使用 ajax 来做到这一点，但它似乎没有工作，并且控制台中没有出现错误。

这是我的控制器功能：

public function showRecentlySoldMakes($makeSlug)
{
    $recentlySoldVehicles = Vehicle::with('make','model')
                                ->where('make_id', $make->id)
                                ->where('sold', 1)
                                ->orderBy('id', 'desc')
                                ->paginate(20);

    return view('researches.make_sold')
        ->with('make', $make)
        ->with('recentlySoldVehicles', $recentlySoldVehicles);
}

这是我的桌子：

                        <table class="table text-center table-striped table-bordered table-reports">
                        <thead>
                        <tr>
                            <th class="table-align" scope="col">Vin</th>
                            <th class="table-align" scope="col">Make</th>
                            <th class="table-align" scope="col">Model</th>
                            <th class="table-align" scope="col">Year</th>
                            <th class="table-align" scope="col">Sold for</th>
                            <th class="table-align" scope="col">Location</th>
                            <th class="table-align" scope="col">Transmission</th>
                            <th class="table-align" scope="col">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                            <div id="infinite-scroll">
                                @foreach($recentlySoldVehicles as $vehicle)
                                        <tr itemscope itemtype="http://schema.org/Car">

                                            <td style="display: none">
                                                <div itemprop="name" content="{{ $vehicle->year ." ".$vehicle->make->name . " " . $vehicle->model_name }}">
                                                </div>
                                            </td>
                                            <td class="table-align" itemprop="vehicleIdentificationNumber">{{ $vehicle->vin }}</td>
                                            <td class="table-align">{{ $vehicle->make->name }}</td>
                                            <td class="table-align">{{ $vehicle->model_name }}</td>
                                            <td class="table-align" itemprop="productionDate">{{ $vehicle->year }}</td>

                                            <td class="table-align">
                                                <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                                                                        <span itemprop="priceSpecification" itemscope itemtype="http://schema.org/UnitPriceSpecification">
                                                                            <meta itemprop="priceCurrency" content="USD">$<meta
                                                                                    itemprop="price" content="{{ $vehicle->source->price }}">{{ number_format($vehicle->source->price, 2, '.', ',') }}
                                                                        </span>
                                                </div>
                                            </td>
                                            <td class="table-align">{{ $vehicle->city_name . ", " . $vehicle->state }}</td>
                                            <td class="table-align">{{ $vehicle->transmission }}</td>
                                            <td class="table-align"><a class="link-research" itemprop="url" href="{{ VehicleHelper::getVehicleUrl($vehicle) }}" target="_blank" rel="nofollow">View Vehicle</a></td>
                                        </tr>
                                @endforeach
                            </div>
                        </tbody>
                    </table>

这是我的脚本：

    <script type="text/javascript">

    var page = 1;
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            page++;
            loadMoreData(page);
        }
    });

    function loadMoreData(page){

        $('.ajax-load').show();

        $.ajax({
            url: '?page=' + page,
            method: 'get',
            success: function(response) {
                console.log(response.url);
                if(response.html == " "){
                    $('.ajax-load').html("No more records found");
                    return;
                }
                console.log(response.html);
                $('.ajax-load').hide();
                $("#infinite-scroll").append(response.html);
            },
            error: function(jqXHR, ajaxOptions, thrownError) {
                alert('server not responding...');
            }
            });
    }
</script>

当我在脚本中控制 response.html 时，它是未定义的。我在这里错过了什么吗？

标签： jqueryajaxlaravelinfinite-scroll