Question

在我网站的用户页面上，有一个名为＆＃34;评论＆＃34;的部分。在评论中，您可以想象，该用户的评论列表。

在控制器中：

$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：收到数据后，我们会先清空$（＆＃39; .reviews＆＃39;）div，然后添加新评论div。

注意

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

Laravel ajax分页打印整个网站

2 个答案: