如何在laravel上实现按钮“显示更多”

Question

我正在尝试使用Ajax请求将“显示更多”按钮添加到我的项目中，但是我没有得到所需的东西

模型中的方法：

public static function collectNewProjects(){
    $newProjects = Project::where('status_id', StatusProject::IN_PROGRESS)->get()->take(4);

    return $newProjects;

}

我的控制器：

public function more ()
{
    $data = Project::collectNewProjects();
    return response()->json($data);
}

当我单击按钮时，我想获得下4个条目

我的路线：

Route::get('more', 'IndexPageController@more');

Ajax：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(".clickMe").click(function(){
        $.ajax({
            dataType: 'json',
            type:'GET',
            url: "{{ url('more') }}",
        }).done(function(data){
            var len=data.length
            console.log(len);
            //Perform ANy action after successfuly post data
            var rows = '';
            for(i=0;i<data.length;i++){
                rows = rows + 'data[i].url'
            }
            $("#morePosts").html(rows);
        })
</script>

blade.php

<div class="b-preview-container" id="take_height">


@include('projects.main_index', [
         'categories'=>$categories,
         'hotProjects'=>$hotProjects ,
         'countProjects' =>$countProjects,
         'newProjects'=>$newProjects
])

</div>
<button type="submit" class="clickMe">Show More</button>
<div id="morePosts"></div>

和main_index.blade.php

<div class="value">
        @foreach($newProjects as $project)
            {{$project->name}}
        @endforeach
</div>

以前，我没有使用Ajax，所以我不知道自己在哪里犯了错误。