Question

我对Laravel还是很陌生，现在我需要为我的项目实现Ajax功能。我知道如何显示文章并通过Ajax创建文章，当我需要列出它们时出现问题。那有两个子问题。

显示我所做的分页文章
，第二个正转到下一页，其中包含新的文章集。我知道如何使用laravel的分页进行此操作，但在这种情况下，也应使用ajax进行分页。

我从ArticlesController获取了一些数据，该数据发送了如下所示的json响应：

{
    status: "success", msg: "Hello!", articles: {…}, request: {…}}
    articles:
    current_page: 1
    data: Array(1)
    0: {id: 3, title: "Post1", body: "<p><strong>Lorem ipsum</strong> dolor sit amet, co…ctum. Duis feugiat facilisis lectus a cursus.</p>", created_at: "2019-06-18 00:23:25", updated_at: "2019-06-18 18:33:52", …}
    length: 1
    __proto__: Array(0)
    first_page_url: "http://articleapp.test/postajax?page=1"
    from: 1
    last_page: 3
    last_page_url: "http://articleapp.test/postajax?page=3"
    next_page_url: "http://articleapp.test/postajax?page=2"
    path: "http://articleapp.test/postajax"
    per_page: 1
    prev_page_url: null
    to: 1
    total: 3
    __proto__: Object
    msg: "Hello!"
    request: {_token: "T31VK2FBVbIBG6IIOK4X4Q0r7WPTlzc7haXCwJrM", message: "bravo"}
    status: "success"
    __proto__: Object
}

Controller方法，该方法在接收到来自ajax函数的调用后，收集数据并将其作为json响应发送回去。该数据的一部分是“文章”表的分页记录：

public function ajaks(Request $request){

        if($request->ajax()){
            $articles = Article::with('user')->paginate(1);

            $response = array(
                'status' => 'success',
                'msg' => "Hello!",
                "articles" => $articles,
                "request" => $request->all(),  
            );

            return response()->json($response);

        }

   }

Ajax函数，它通过预定路径与csrf令牌一起发送请求，然后接收响应。根据该响应，它将构造html，然后将其附加到我的布局刀片中的特定div上。她是ajax函数：

function ajaks(/*par*/){
    let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    console.log("hit");
    $.ajax({
        url: '/postajax',
        type: 'POST',
        data: {_token: token , message: "bravo"},
        dataType: 'JSON',
        success: (response) => { 
            console.log("success");
            console.log(response);
            let body = "";
            let html = "<div class='container'>";

            let len = response.articles.data.length;
            for(let i=0;i<len;i++){

                html += "<div class='row' style='background-color: whitesmoke;'><div class='col-md-4 col-sm-4'><a href='/articles/"+response.articles.data[i].id+"'><img class='postCover postCoverIndex' src='/storage/images/"+response.articles.data[i].image+"'></a></div><div class='col-md-8 col-sm-8'><br>";

                if(response.articles.data[i].body.length > 400){
                    body = response.articles.data[i].body.substring(0, 400)+"<a href='/articles/"+response.articles.data[i].id+"'>...Read more</a>";
                }
                else{
                    body = response.articles.data[i].body;
                }

                html += "<p>"+body+"</p>";
                html += "<small class='timestamp'>Written on "+response.articles.data[i].created_at+" by "+response.articles.data[i].user.name+"</small></div></div><hr class='hrStyle'>";
            }

            let pagination = "<div class='container'><ul class='pagination justify-content-center'><li class='page-item'><a class='page-link' href='#'>Previous</a></li>";
            for(let i=0;i<response.articles.last_page;i++){
                pagination += "<li class='page-item'><a class='page-link' href='#'>"+(i+1)+"</a></li>";
            }
            pagination += "<li class='page-item'><a class='page-link' href='#'>Next</a></li></ul></div>";


            //console.log(pagination);
            html += "</div>"+"<form id='pagForm'>"+pagination+"</form>";

            if(document.getElementById("maine")){

                    document.getElementById("maine").innerHTML = html;
            }
        },
        error: (response) => {
            console.log("error");
            console.log(response);
        }
    }); 

}

有了这个，我正在检查ajax路由并获取第一套文章：

<?php
if(Route::getFacadeRoot()->current()->uri()=="ajax"){
?>
<script>
    $(document).ready(function(){
        ajaks();
    });
</script>
<?php
}
?>

它在我的布局刀片中。另外，分页链接只是简单的引导程序，它只能帮助我可视化。我的问题是我该如何使用它进行分页？什么是使用Ajax的正确方法，因为我不能依靠Laravel的内置分页进行此操作。我应该在分页链接上附加另一个ajax函数，然后再次调用控制器方法吗？而当控制器方法通过请求接收到此类信息时，如何在控制器方法中的分页中使用它？

Answer 1

您实际上可以通过ajax轻松使用Laravel的内置分页，您只需要在请求中传递页面即可。分页功能将检测到请求的页面并自动处理结果。

function ajaks(p){
    p = typeof p === 'number' && p > 0 ? p : 1;
    let token = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    console.log("hit");
    $.ajax({
        url: '/postajax',
        type: 'POST',
        data: {_token: token , message: "bravo", page: p},
...

正如您指出的那样，您还需要捕获分页链接上的点击，停止传播常规的click事件，并将其重定向到这样的函数中……

$(document).on('click', '.pagination a', function(e){
  e.preventDefault();
  var p = $(this).attr('href').split('page=')[1];
  ajaks(p);
});

这假设标准的laravel分页链接具有page = x作为查询参数。您可以很容易地将其添加到现有的分页例程中，或者我的窍门通常是在控制器中呈现html并将其传递回我的ajax响应中，例如...

$articles = Article::with('user')->paginate(1);
$response = array(
  'status' => 'success',
  'msg' => "Hello!",
  "articles" => $articles,
  "request" => $request->all(),
  'pagination' => (string)$articles->links()
);

然后在浏览器中呈现它...

$('#pagination').html(response.pagination);

在Laravel中使用Ajax进行分页

1 个答案: