FOSUserBundle (login / register) + AJAX + Symfony2

Question

I installed FOSUserBundle on my Symfony2 website and I overwrited the login and register pages. It's working very well, but now, I have another issue :

Making a pop up with an AJAX check for the login and register part, working with the different routes, controllers, etc.

How to do that the best way ?

My pop up is a simple bootstrap modal of login.html.twig page for FOSUserBundle, here is the code of the modal-body for the login part (I will use the register form for the register part) :

<div class="modal-body">
    {% trans_default_domain 'FOSUserBundle' %}

    {% block fos_user_content %}
        <form action="{{ path("fos_user_security_check") }}" method="post">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />

            <label for="username">{{ 'security.login.username'|trans }}</label>
            <input type="text" id="username" name="_username" value="" required="required" />

            <label for="password">{{ 'security.login.password'|trans }}</label>
            <input type="password" id="password" name="_password" required="required" />
            <br /><br />
            <input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
        </form>
    {% endblock fos_user_content %}
</div>

I already searched on StackOverflow and other websites but didn't find the good answer I was looking for.

Thank you.

Answer 1

no token when you use AJAX

user=$('#username').val();
pass=$('password').val();
$.ajax(
     {
     type: "POST",
     url: "{{ path ('your-rout')}}",
     data: {'user': user,'pass':pass},
      beforeSend: function() {
       },
      success: function(json) {}
});