Laravel ajax 分页打印出整个网站

Question

在我的网站用户页面上，有一个名为"评论"的部分。可以想象，在评论中，有一个针对该用户的评论列表。

在控制器中：

$reviews = Review::where('artist_id', $user->id)->orderBy('created_at', 'desc')->simplePaginate(5);

在标记中：

@if ($reviews->count())
<div class="artistContain">
    <h3>Reviews</h3>
    <div class="reviews endless-pagination" data-next-page="{{ $reviews->nextPageUrl() }}">
        @foreach ($reviews as $review)
        <div class="review">
            {{ $review->body }}
        </div>  
        @endforeach
        <div class="pagerHolder">{!! $reviews->render() !!}</div>
    </div>
</div>      
@endif

凉。它列出了5条评论，然后您必须单击分页按钮，该按钮将刷新页面并显示下一组评论。

但是，我不希望用户必须刷新页面，所以我正在尝试 ajax。

.JS：

$('body').on('click', '.pagination a', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    $.get(url, function(data){
        $('.reviews').html(data);
    });
});

现在这行得通了。有点。问题是，它会将整个新页面注入评论div。但是，嘿，至少它带来了正确的结果。

我将如何解决此问题，以便.html()方法仅给我带来下一组结果？

Answer 1

您可以使用

load(( 方法来加载页面片段并避免加载整个页面

// container is the id of the returned reviews container
// Change it to your returned review container id
$( ".reviews" ).load( url +" #container" );

Answer 2

您可以通过执行以下步骤来解决此问题;

在控制器中

$reviews = Review::where('artist_id', $user->id)->orderBy('created_at', 'desc')->simplePaginate(5);
if(request()->ajax())
{
    return $reviews;    // in case of ajax, return only data instead of view
}
else
{
    return view('name-of-your-view', ['reviews' => $reviews])
}

JavaScript

$('body').on('click', '.pagination a', function(e){
    e.preventDefault();
    var url = $(this).attr('href');
    $.get(url, function(data){
        $('.reviews').empty();                  // make it empty first
        $.each(data, function(i, review){
            $('.reviews').append('<div class="review">'+review.body+'</div>');
        });
    });
});

解释

控制器

：我们需要修改控制器，当请求是 ajax 时，它将只返回集合$reviews而不是完整视图。

JavaScript：当收到数据时，我们将首先清空 $('.reviews'(div，然后附加新的评论div。

注意

上面的代码可能有语法错误，因为我没有在代码编辑器上键入它，也没有测试它。但这是解决问题的正确方法。