时间戳

首页 > 解决方案 > Symfony 3/4：通过 AJAX 完成的 KpnPaginator

php - Symfony 3/4：通过 AJAX 完成的 KpnPaginator

问题描述

我目前正在提高我在 Symfony 4 上的技能。我遇到了一个小问题。

我有一个网站，这是一个列出文章的博客。

我想在上面添加分页，所以我检查了 KpnPaginator，它工作得非常好。

这是代码，

控制器：

 /**
 * @Route("/blog", name="blog")
 * @param ArticleRepository $repo
 * @param Request $request
 * @param PaginatorInterface $paginator
 * @return \Symfony\Component\HttpFoundation\Response
 */
public function index(ArticleRepository $repo, Request $request, PaginatorInterface $paginator)
{

    /*
     *  $repo = $this->getDoctrine()->getRepository(Article::class);
     */

    $articlesQuery = $repo->findAll();


    // Paginate the results of the query
    $articles = $paginator->paginate(
    // Doctrine Query, not results
        $articlesQuery,
        // Define the page parameter
        $request->query->getInt('page', 1),
        // Items per page
        5
    );

    return $this->render('blog/index.html.twig', [
        'controller_name' => 'BlogController',
        'articles' => $articles
    ]);
}

观点：

{% extends 'base.html.twig' %}

{% block title %}Hello {{ controller_name }}!{% endblock %}

{% block body %}
<section class="articles" id="">

    {% for article in articles %}
        <article>
            <h2>{{ article.title }}</h2>
            <div class="metadata">Written on {{ article.createdAt | date('d/m/Y') }}
                at {{ article.createdAt | date('H:i') }}, in Politic Category
            </div>
            <div class="content"><img src="{{ article.image }}" alt="">{{ article.content | raw }}
                <a href="{{ path('blog_show', {'id': article.id}) }}" class="btn btn-primary">Read moree</a>
            </div>
        </article>
    {% endfor %}
</section>
<br>
{{ knp_pagination_render(articles) }}
{% endblock %}

我的问题是，

如何通过 ajax 请求使其工作？

就像，一旦我点击链接，它不会刷新页面，而是动态加载内容？

标签： phpajaxsymfonypagination

解决方案

您需要在 JavaScript 中设置一个 onclick 处理程序，该处理程序对您的 ArticleController 进行 AJAX 调用。

你可以使用这样的东西：

$(document).ready(function() {

var $div = $('.articles');

$.ajax({
    method: 'GET',
    url: '/api/articles' + window.location.search,
    headers: {
        'Accept':'application/json',
        'Content-Type':'application/json'
    },
    dataType: 'json',
    success: function(data){
        $.each(data.items, function(key, article) {
            var html = articleTemplate(article);
            $div.append($.parseHTML(html));
        });
    }
});
});

const articleTemplate = (article) =>
`<article>
        <h2>${ article.title }</h2>
        <div class="metadata">Written on ${ article.createdAt }}
            at ${ article.createdAt }, in Politic Category
        </div>
        <div class="content"><img src="${ article.image }" alt="">${ article.content }
            <a href="{{ Routing.generate('blog_show', {'id': article.id}) }}" class="btn btn-primary">Read more</a>
        </div>
    </article>`;

这是使用 ES6 JavaScript 模板字符串来更新页面上的 HTML，因此您可以从 Twig 模板中删除此部分。如果您想在 JavaScript 中使用路由，您还需要安装 FOSJSRoutingBundle - https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

您需要让 ArticleController 返回一个 JSON 响应，JavaScript 处理程序将使用该响应更新页面。

推荐阅读