Réaliser une requête ajax sous Symfony

L'objectif

Dans ce tutoriel, nous allons voir comment effectuer une requête ajax sous le framework PHP Symfony.

Ici, j'utilise un exemple concret d'une recherche de villes mais vous pouvez par exemple faire un système de vote en ajax, la logique reste exactement la même, seul le code change.

L'objectif ici est d'effectuer une recherche de villes dont le nom correspond aux caractères saisis par l'utilisateur.

Je prends en considération que vous avez déjà une base de données avec toutes les villes de France, cette base de données doit être reliée à votre projet. L'entité et le repository correspondants doivent également être générés.

Les pré-requis

Pour commencer ce tutoriel, vous devez au préalable avoir la bibliothèque JQuery. Vous pouvez l'obtenir ici : Télécharger JQuery.

Insérer ensuite la balise suivante dans le header de votre page :

<script src="jquery.min.js"></script>

Dans la vue twig

Votre code javascript doit être réalisé en fonction de votre formulaire présent dans votre vuee twig. Ce code fera appel à une route prédéfinie dans votre fichier routing.yml.

<form method="post" action="">
    <input type="text" id="mot_cle">
</form>

<div id="results">
    <ul class="result">
    {% for ville in villes %}
        <li><a id="resultats_ville" href="{{ path('votre_route_ville', {'id': ville.id}) }}"></a></li>
    {% endfor %}
    </ul>
</div>

<script>
$(document).ready( function() {
        if (!jQuery('body').hasClass('searching')) {
            $('#mot_cle').keyup(function (e) {
                var contenu = $('#mot_cle').val();
                $('#results').html('');
                if (contenu.length > 2) {
                    jQuery('#results').addClass('miniload');
                    jQuery('#results').append('<div id="chargement">Chargement...<div id="spinner" class="spinner"></div></div>');
                    setTimeout(function() {
                        $.ajax({
                            type: 'POST',
                            url: "{{ path('votre_route') }}",
                            data: 'mot_cle=' + contenu,
                            success: function (data) {
                                jQuery('body').addClass('searching');
                                $('#results').html('');
                                jQuery('#chargement').remove();
                                $('#results').html(data);
                                return;
                            },
                            complete : function(){
                                jQuery('#chargement').remove();
                                return jQuery('body').removeClass('searching');
                            }
                        });
                    }, 1000);
                }
            });
        }
    });
</script>

Ajouter la route

Ajoutez la route à votre fichier routing.yml de votre Bundle

votre_route_recherche:
    path:      /recherche
    defaults: { _controller: VotreBundle:Bundle:recherche }
    methods: [post]

Créer une fonction dans votre controller

Dans cette fonction, on récupère la variable passée en POST (ou en GET selon ce que vous avez choisi). Si cette variable n'est pas vide, alors vous effectuez une recherche dans votre repository. Il ne reste plus qu'à retourner les résultats dans un tableau passé en paramètre à la vue twig.

public function rechercheAction(Request $request)
{
    if($request->isXmlHttpRequest())
    {
        $mot_cle = $request->request->get('mot_cle');
        if(!empty($mot_cle))
        {
            $repository = $this
            ->getDoctrine()
            ->getManager()
            ->getRepository('VotreBundle:Villes')
            ;

            $villes = $repository->findByName($mot_cle);
        }

        return $this->render('VotreBundle:Bundle:result.html.twig', array(
        'villes' => $villes
        ));
    }
}

Et voilà !

Reste plus qu'à mettre un peu de css là-dessus et tout est censé être fonctionnel.
A noter qu'ici, ce n'est pas la meilleure des manières de procéder car on retourne les données à une vue qui est insérée dans la page, le mieux est de retourner les data en JSON.
J'espère que ce tutoriel vous a été utile, n'hésitez pas à me donner des retours.

Commentaires

Orange_Tonic

Bonjour, Je ne sais pas pour les autres mais moi ça me retourne une erreur vu que le render n'a pas lieu que dans la condition. Je suis débutant et c'est du Symfony4 avec les annotations. Vous pouvez m'aider?

Gaëtan Lefèvre

Bonjour, j'ai réalisé ce tutoriel sur Symfony2 et Symfony3. Je n'ai pas encore utilisé la version 4 de Symfony mais je sais qu'elle est assez différente des autres. Quelle erreur est affichée ?

Les commentaires sont soumis à un système de modération avant d'être publiés.

Rédiger un commentaire