PHP-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请求使其工作？

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

解决方法:

您需要在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响应来更新页面.

大佬总结

以上是大佬教程为你收集整理的PHP-Symfony 3/4：通过AJAX完成的KpnPaginator全部内容，希望文章能够帮你解决PHP-Symfony 3/4：通过AJAX完成的KpnPaginator所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。