Question

我想问一下如何使用js或ajax显示更多数据，并调用Controller将结果显示在我的视图中。到目前为止，我第一次显示8个限制（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
调用

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进入页脚，调用控制器通过网址获取具有相同限制的数据

<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个帖子。我错过了什么或者我的代码错了吗？任何帮助都会很感激。

Answer 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，在帮助我解决这个问题的评论中。

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

1 个答案: