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

2019-10-25 00:29:38 阅读：179 来源： 互联网

我目前正在提高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请求使其工作？

喜欢,
单击链接后,它不会刷新页面,而是动态加载内容吗？

解决方法:

您需要在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处理程序将使用该JSON响应来更新页面.

标签：ajax,symfony,pagination,php
来源： https://codeday.me/bug/20191024/1924627.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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