Laravel：将更多数据从控制器加载到视图中答案

【问题标题】：Laravel: Load more data from controller into viewLaravel：将更多数据从控制器加载到视图中
【发布时间】：2018-02-19 12:51:17
【问题描述】：

我想问如何使用 js 或 ajax 显示更多数据并调用 Controller 将结果显示到我的视图中。到目前为止，我第一次显示 8 个带有 limit(8) 的帖子。然后我使用 ajax 调用控制器并每次带来更多 8 个帖子。我面临的问题是每次调用控制器或 ajax 时帖子都是相同的。这是我的

PostsController

class PostsController extends Controller {
    public function index(Request $request)
    {
        $posts = Post::orderBy('created_at', 'desc')->limit(4)->get();
        $categories = Category::all();

       if ($request->ajax()) {
           $view = view('posts.load', compact('posts', 'categories'))->render();
           return response()->json(['html'=>$view]);
       }

        return view('posts.display', compact('categories', 'posts'));
    }
}

控制器被web、路由调用

Route::get('/posts', 'PostsController@index');

我将 foreach 方法调用到我的 posts.display 中

    <div class="col-md-8 col-md-offset-2" id="grid" style="padding-top: 40px;">
    @foreach($posts as $post)
        @if(strlen($post->body) < "701")
            <div class="item">
                <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                    <span class="time">{{$post->created_at}}</span>  
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("link")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("mail")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("pin")}}
                        </span>
                    </a>
                </div>
                <div class="tr-text">
                    <div class="col-md-12 td-text">
                        <p><a>{{$post->body}}</a></p>
                    </div>
                </div>
                <div class="tr-tag">
                    <div style="padding: 1px 0 1px 0; text-align: center">
                        {{Emoji::findByName("tag")}}Tag: 
                            @foreach($categories as $category)
                                @if($category->id == $post->category_un)
                                    <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                                @endif
                                @if($category->id == $post->category_fac)
                                    <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                                @endif
                            @endforeach
                    </div>
                </div>
                <div class="tr-options">
                    <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
                </div>
            </div>
        @elseif(strlen($post->body) > "700")
            <div class="item">
                <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                    <span class="time">{{$post->created_at}}</span>  
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("link")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("mail")}}
                        </span>
                    </a>
                    <a href="">
                        <span class="emoji">
                            {{Emoji::findByName("pin")}}
                        </span>
                    </a>
                </div>
                <div class="tr-text">
                    <div class="col-md-12 td-text">
                        <p class="more"><a>{{$post->body}}</a></p>
                        <?php // echo strlen($post->body);?>
                        <!--- <a><span>Διάβασέ την συνέχεια..</span></a> -->
                    </div>
                </div>
                <div class="tr-tag">
                    <div style="padding: 1px 0 1px 0; text-align: center">
                        {{Emoji::findByName("tag")}}Tag: 
                            @foreach($categories as $category)
                                @if($category->id == $post->category_un)
                                    <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                                @endif
                                @if($category->id == $post->category_fac)
                                    <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                                @endif
                            @endforeach
                    </div>
                </div>
                <div class="tr-options">
                    <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                        <hr class="vt-hr" />
                    <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
                </div>
            </div>
        @endif
    @endforeach
</div>
<div class="ajax-load text-center" style="display:none">
    <p><img src=""></p>
</div>

最后我使用 ajax，进入页脚，调用控制器通过 url 获取具有相同限制的数据

<script type="text/javascript">
$(window).scroll(function() {
    var flag = 0;
    if($(window).scrollTop() + $(window).height() >= $(document).height()) {
        $.ajax(
        {
            url: '/posts',
            type: 'get',
            /*beforeSend: function()
            {
                $('.ajax-load').show();
            }*/
            data: {
                'offset': flag,
                'limit': 8
            },
            success: function(data){
                $('.ajax-load').hide();
                $("#grid").append(data.html);
                flag += 8;
            }
        })
    }
});

function loadMoreData(){
  $.ajax(
        {
            url: '/posts',
            type: 'get',
            /*beforeSend: function()
            {
                $('.ajax-load').show();
            }*/
            data: {
                'offset': 0,
                'limit': 8
            }
        })
        .done(function(data)
        {
            if(data.html == " "){
                $('.ajax-load').html("No more records found");
                return;
            }

            $('.ajax-load').hide();
            $("#grid").append(data.html);
            flag += 8;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('server not responding...');
        });
}

所有的数据都被ajax显示到posts.load的posts.display代码的副本中

 @foreach($posts as $post)
    @if(strlen($post->body) < "701")
        <div class="item">
            <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                <span class="time">{{$post->created_at}}</span>  
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("link")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("mail")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("pin")}}
                    </span>
                </a>
            </div>
            <div class="tr-text">
                <div class="col-md-12 td-text">
                    <p><a>{{$post->body}}</a></p>
                </div>
            </div>
            <div class="tr-tag">
                <div style="padding: 1px 0 1px 0; text-align: center">
                    {{Emoji::findByName("tag")}}Tag: 
                        @foreach($categories as $category)
                            @if($category->id == $post->category_un)
                                <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                            @endif
                            @if($category->id == $post->category_fac)
                                <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                            @endif
                        @endforeach
                </div>
            </div>
            <div class="tr-options">
                <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
            </div>
        </div>
    @elseif(strlen($post->body) > "700")
        <div class="item">
            <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0">
                <span class="time">{{$post->created_at}}</span>  
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("link")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("mail")}}
                    </span>
                </a>
                <a href="">
                    <span class="emoji">
                        {{Emoji::findByName("pin")}}
                    </span>
                </a>
            </div>
            <div class="tr-text">
                <div class="col-md-12 td-text">
                    <p class="more"><a>{{$post->body}}</a></p>
                    <?php // echo strlen($post->body);?>
                    <!--- <a><span>Διάβασέ την συνέχεια..</span></a> -->
                </div>
            </div>
            <div class="tr-tag">
                <div style="padding: 1px 0 1px 0; text-align: center">
                    {{Emoji::findByName("tag")}}Tag: 
                        @foreach($categories as $category)
                            @if($category->id == $post->category_un)
                                <a href=""><span class="tag-un">#{{$category->name}}</span></a>,
                            @endif
                            @if($category->id == $post->category_fac)
                                <a href=""><span class="tag-fac">#{{$category->name}}</span></a>
                            @endif
                        @endforeach
                </div>
            </div>
            <div class="tr-options">
                <a href="" style="color: #dca20f"><span class="cool">(0) {{Emoji::findByName("cool")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #AA8062"><span class="poo">(0) {{Emoji::findByName("poo")}}</span></a>
                    <hr class="vt-hr" />
                <a href="" style="color: #000000"><span class="speech">(0) {{Emoji::findByName("speech")}}</span></a>
            </div>
        </div>
    @endif
@endforeach

所以我的问题是，为什么这总是带来相同的数据？每次我到达滚动的末尾并且 ajax 调用控制器时，它都会坚持前 8 个帖子而不是下一个 8 个帖子。我错过了什么还是我的代码有误？任何帮助将不胜感激。

【问题讨论】：

使用 $dbObject->paginate(8) 而不是 limit(4)。您只需将参数 'page' 传递给控制器，其余的都可以正常工作。
你好@Shan，谢谢你的回复-帮助。我试图将这个$posts = Post::orderBy('created_at', 'desc')->limit(4)->get(); 更改为这个$posts = Post::orderBy('created_at', 'desc')->$dbObject->paginate(8)->get();。但是重新加载 /posts 页面时出现错误 无法访问空属性
我的意思是 $posts = Post::orderBy('created_at', 'desc')->paginate(4);
亲爱的@Shan.. 谢谢你的帮助，我很感激。我完全尝试了您在此消息上方发布的内容，但似乎仍然无法正常工作。它还一遍又一遍地加载相同的 4 个帖子。

标签： javascript php jquery ajax laravel-5.4

【解决方案1】：

在@Shan 的帮助下，我找到了问题所在。

首先我将我的 js 固定在这个的页脚中：

<script type="text/javascript">
    var pageNumber = 2;

    $(document).ready(function() {
            $.ajax({
                type : 'GET',
                url: "websiteURL/posts?page=" +pageNumber,
                success : function(data){
                    pageNumber +=1;
                        if(data.length == 0){
                        }else{
                            $('#grid').append(data.html);
                        }
                },error: function(data){

                },
            })  
    });

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() >= $(document).height()) {
            $.ajax({
                type : 'GET',
                url: "websiteURL/posts?page=" +pageNumber,
                success : function(data){
                    pageNumber +=1;
                        if(data.length == 0){
                        }else{
                            $('#grid').append(data.html);
                        }
                },error: function(data){

                },
            })  
        }
    });

    function loadMoreData(){
            $.ajax({
                type : 'GET',
                url: "http://communitune.com/posts?page=" +pageNumber,
                success : function(data){
                    pageNumber +=1;
                        if(data.length == 0){
                            // :( no more articles
                        }else{
                            $('#grid').append(data.html);
                        }
                },error: function(data){

                },
            })  
    }
</script>

然后我把固定控制器也放进去

 public function index(Request $request)
    {
        $posts = Post::orderBy('created_at', 'desc')->paginate(8);
        //$posts = Post::orderBy('created_at', 'desc')->limit(8)->get();
        $categories = Category::all();

       if ($request->ajax()) {
           $view = view('posts.load', compact('posts', 'categories'))->render();
           return response()->json(['html'=>$view]);
       }

        return view('posts.display', compact('categories', 'posts'));
    }

感谢@Shan，在评论中帮助我解决了这个问题。

【讨论】：