web-dev-qa-db-fra.com

Simple AJAX au contrôleur - Symfony3

J'utilise Symfony3 avec PhpStorm.2016.3.2 sur Ubuntu16.04

Je n'ai jamais fait de demande AJAX auparavant et j'aimerais tester un appel au contrôleur d'une vue-> au contrôleur-> qui renvoie une réponse à la vue en JSON.

J'ai donc lu sur le doc mais ils sont tous très précis. Donc mon désir est de ne pouvoir écrire qu'une simple AJAX dans une vue(index.html.twig), pour le tester, appelez le contrôleur(MainController.php) et renvoie la réponse dans JSON dans la vue.

Voici mon point de vue:

{% extends 'app/layout.html.twig' %}

{% block content %}

{% endblock %}

Mon contrôleur:

class MainController extends Controller
{
    public function indexAction()
    {
        return $this->render('app/main/index.html.twig');
    }
}

Je ne veux vraiment pas faire le travail des autres, je veux juste avoir une idée de comment le faire fonctionner. Je suis donc désolé si mon ticket est plutôt vide mais peut-être que cela peut aussi aider les autres, comme moi, à savoir par où commencer.

ajaxsymfony
8
chicken burger

Au début, vous devez enregistrer l'itinéraire sur votre contrôleur:

app_bundle_route:
   path:     /ajax_request
   defaults: { _controller: AppBundle:Main:index }

Chargez ensuite jQuery dans votre vue principale, vous l'avez peut-être déjà fait. Vous avez besoin d'un appel à l'action dans votre modèle, d'un déclencheur pour commencer la demande AJAX:

{% extends 'app/layout.html.twig' %}

{% block content %}
    <button class="ajax">click me!</button>
    <div id="ajax-results">here comes the result</div>
    <script>
        $(document).on('click', 'button.ajax', function(){
            that = $(this);
            $.ajax({
                url:'{{ (path('app_bundle_route')) }}',
                type: "POST",
                dataType: "json",
                data: {
                    "some_var_name": "some_var_value"
                },
                async: true,
                success: function (data)
                {
                    console.log(data)
                    $('div#ajax-results').html(data.output);

                }
            });
            return false;

        });
    </script>
{% endblock %}

Et au moins votre contrôleur est très simple:

public function indexAction(Request $request)
{
    if($request->request->get('some_var_name')){
        //make something curious, get some unbelieveable data
        $arrData = ['output' => 'here the result which will appear in div'];
        return new JsonResponse($arrData);
    }

    return $this->render('app/main/index.html.twig');
}

Je pense que ce concept devrait préciser comment il peut fonctionner

27
Rawburner