Vous avez besoin de dynamiser vos pages ? Vous utilisez Symfony3 pour votre backend ?
Ce min tuto vous permettra de mettre en place des requêtes AJAX très rapidement.

Contexte de l’exemple : un utilisateur clique sur un personnage de dessin animé, une requête est envoyée au serveur pour nous donner des infos sur ce dessin animé (titre et producteur du dessin animé). Les infos sont affichées dans un <span> sans recharger la page.

Étape 1 : les routes

Vous avez besoin de 2 routes :

  1. la route qui mène à votre page
  2. la route qui mène à la fonction qui sera appelée par l’AJAX pour traiter votre requête
home:
    path: /
    defaults:
        _controller: AppBundle:Default:index
ajax_route:
    path:     /ajax_request
    defaults:
        _controller: AppBundle:Default:ajax
    methods: [post]

Étape 2 : la vue

On met en place le HTML, et la fonction AJAX (on utilise JQuery pour l’appeler). N’oubliez pas d’insérer la bibliothèque JQuery.

2.1 Le HTML

Dans cet exemple, de simple boutons feront l’affaire pour appeler la fonction AJAX.

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <h1>Cliquez sur un personnage</h1>
            <button type="button" class="btn btn-warning">Homer</button>
            <button type="button" class="btn btn-danger">Cartman</button>
            <button type="button" class="btn btn-primary">Elsa</button>
            <button type="button" class="btn btn-success">Lord Farquaad</button>
            <br><br>
            <div>
                <h2>Titre de l'oeuvre : <span id="titre"></span></h2>
                <h2>Producteur : <span id="producteur"></span></h2>
            </div>
        </div>
    </div>
</div>

2.2 Le Javascript

Quand l’utilisateur clique sur un bouton, on récupère le nom du personnage. Puis on crée la focntion AJAX.
Concernant l’URL : on met l’URL directement, mettre le nom de la route en Twig ne fonctionne pas.
Puis on renseigne les données que l’on souhaite envoyer au controller, ici on envoie que le nom du personnage.
En cas de succès, on affiche le producteur et le titre dans les span.

$('.btn').click( function(){
    var personnage = $(this).html()
    $.ajax({
        url:'/ajax_request',
        type: "POST",
        dataType: "json",
        data: {
            "personnage": personnage
        },
        async: true,
        success: function (data)
        {
            console.log(data)
            $( '#titre' ).text(data.titre);
            $( '#producteur' ).text(data.producteur);

}
})
});

Étape 3 : le controller

On va maintenant agir sur les données envoyées par AJAX dans le controller. Ici on va juste faire un simple switch sur le nom du personnage.

3.1 On ajoute les dépendances

On a besoin des dépendances suivantes : Request et Response

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

3.2 On crée la fonction

Nous allons ici renvoyer du JSON. Si vous avez besoin de serializer un objet, c’est par ici :
https://symfony.com/doc/current/components/serializer.html

public function ajaxAction(Request $request)
{
    /* on récupère la valeur envoyée par la vue */
    $personnage = $request->request->get('personnage');
    switch ($personnage){
        case 'Homer':
            $titre = 'Simpsons';
            $producteur = 'Matt Groening';
            break;
        case 'Cartman':
            $titre = 'South Park';
            $producteur = 'Trey Parker and Matt Stone';
            break;
        case 'Elsa':
            $titre = 'Reine des neiges';
            $producteur = 'Walt Disney Animation Studios';
            break;
        case 'Lord Farquaad':
            $titre = 'Shrek';
            $producteur = 'Dreamworks';
    }

    /* la réponse doit être encodée en JSON ou XML, on choisira le JSON
     * la doc de Symfony est bien faite si vous devez renvoyer un objet         *
     */
    $response = new Response(json_encode(array(
        'titre' => $titre,
        'producteur' => $producteur
    )));
    $response->headers->set('Content-Type', 'application/json');

    return $response;
}

Étape 4 : enjoy AJAX.

Vous avez maintenant un appel du côté du serveur et une réponse dynamique. Plus besoin de rafraîchir la page pour envoyer les données.

Vous pouvez voir les appels AJAX dans la Toolbar de Symfony.