在Laravel中使用Ajax分页

我对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
}

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

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);
        }
    }); 

}

函数ajaks（/*par*/）{
让token=document.querySelector（“meta[name='csrf-token']”）。getAttribute（“content”）；
控制台日志（“命中”）；
$.ajax({
url:“/postajax”，
键入：“POST”，
数据：{u令牌：令牌，消息：“bravo”}，
数据类型：“JSON”，
成功：（响应）=>{
控制台日志（“成功”）；
控制台日志（响应）；
让body=“”；
设html=“”；
设len=response.articles.data.length；
for（设i=0；i 400）{
body=response.articles.data[i].body.substring（0400）+；
}
否则{
body=response.articles.data[i].body；
}
html+=“”+body+“
”；
html+=“写在”+response.articles.data[i]上。由”+response.articles.data[i]在“+”处创建。user.name+”
；
}
让分页=“
”；
for（设i=0；i{
控制台日志（“错误”）；
控制台日志（响应）；
}
}); 
}

有了这些，我正在检查ajax路线并获得第一组文章：

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

$（文档）.ready（函数（）{
ajaks（）；
});

这是在我的布局刀片。而且分页链接只是简单的引导，它只是帮助我可视化。

---

我的问题是如何使用它进行分页？使用ajax的正确方法是什么，因为我不能依赖于Laravel的内置分页。我应该在分页链接上附加另一个ajax函数，然后再次调用controller方法吗？当controller方法收到这样的via请求时，如何在中进行分页控制器方法？

实际上，您可以通过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},
...

正如您所指出的，您还需要捕获分页链接上的点击，停止常规点击事件，并将其重定向到您的函数，如下所示

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

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

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

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

$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);

---

这样做了，但使用了循环生成的分页，而不是href属性，我通过使用jquery的text（）捕获了它的内部html；唯一剩下的是如何为“上一页”和“下一页”按钮提供功能。我这样做是偶然的。当时，当您通过数据发送页面值时，我不知道您的解决方案。页面实际上，您的解决方案优于mein（关于分页）。将适用。