那些遇到过的问题

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

Mih*_*tiu 0 javascript php ajax jquery laravel-5.4

我想问一下如何使用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'));
    }
}
Run Code Online (Sandbox Code Playgroud)

控制器由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>
Run Code Online (Sandbox Code Playgroud)

最后我使用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...');
        });
}
Run Code Online (Sandbox Code Playgroud)

所有数据都由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
Run Code Online (Sandbox Code Playgroud)

所以我的问题是,为什么这会带来相同的数据呢？每当我到达滚动结束并且ajax调用控制器时,它会坚持使用前8个帖子而不是下一个8个帖子.我错过了什么或者我的代码错了吗？任何帮助将是欣赏它.

Mih*_*tiu 5

在@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>
Run Code Online (Sandbox Code Playgroud)

然后我把固定控制器也放入

 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'));
    }
Run Code Online (Sandbox Code Playgroud)

学分归于@Shan,在帮助我解决这个问题的评论中.

归档时间：

查看次数：

7231 次

最近记录：

8 年，8 月 前
相关归档
Javascript是否通过引用传递？ 340
如何启用curl,安装Ubuntu LAMP堆栈？ 214
Javascript expando对象 49
prepend没有jQuery？ 25
密码验证至少为6个字符 24
使用带有django形式的ajax时,得到错误"选择一个有效的选择.这不是可用的选择之一." 10
哪些移动浏览器支持javascript(和Ajax)？ 9
使用jQuery查找XML节点并将其放入现有HTML表中 8
jQuery无法在ajax加载后选择元素 6
XMLHttpRequest对象的open方法的相对路径 4
难疑归档
如何使用保存实例状态保存Android Activity状态？ 2538
如何确定数组是否包含Java中的特定值？ 2194
查找当前目录和文件的目录 2007
如何在Java中声明和初始化数组？ 1946
我如何递归grep？ 1619
Node.js module.exports的目的是什么,你如何使用它？ 1397
如何在Linux shell脚本中提示是/否/取消输入？ 1352
谁正在侦听Mac OS X上的给定TCP端口？ 1267
按ID删除元素 1085
我必须在何处以及为何要使用"模板"和"typename"关键字？ 1061