Как получить данные из запроса AJAX с помощью Symfony 4?

Question

Я пытаюсь получить данные из AJAX-запроса с Symfony 4, и получаю не то, что ожидаю.

Вот мои маршруты. Yaml

(...)
ajax_test:
    path: /ajax/test
    defaults: { _controller: 'App\Controller\AjaxTestController::test' }
    requirements:
        _method: POST

Мой контроллер:

<?php

namespace App\Controller;


use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;

class AjaxTestController extends AbstractController
{
    public function test(Request $request) {
        if ($request->isXmlHttpRequest()) {
            $serializer = $this->get('serializer');
            $response = $serializer->serialize('test ok', 'json');

            return new JsonResponse(['data' => $response]);
        }

        return new Response("test ko", 400);
    }
}

Вот шаблон, в котором я делаю AJAX-запрос:

{% extends "layout.html.twig" %}

{% set active = 'connexion' %}

{% block page_title 'Login' %}

{% block final_javascripts %}
    {{ encore_entry_script_tags('sendCredentials') }}
{% endblock %}


{% block content %}
    (...)

            <div class="row mt-4">
                <div class="col-md-6">
                    <form id="connexion-form" action="{{ path('security_connexion') }}" method="post">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" id="email" name="_email" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="password">Mot de passe</label>
                            <input type="password" id="password" name="_password" class="form-control">
                        </div>

                        <button type="submit" class="btn btn-primary button">Se connecter</button>
                    </form>
                </div>

            </div>
        </div>
    </div></div>
{% endblock %}

И, наконец, файл JavaScript (sendCredentials.js), в котором я делаю AJAX-запрос:

$(document).ready(function() {
    $('#connexion-form').submit(function(event) {
        sendCredentials($('#email').val(), $('#password').val());
    });
});

function sendCredentials(username, password) {
    $.ajax({
        method: "POST",
        url: "/ajax/test",
        data: {username: username, password: password},
        async: false
    }).done(function(msg) {
        console.log(msg['data']);
        console.log(msg);
    });
}

Первый журнал console.log(msg['data']); отображает undefined. Во втором журнале console.log(msg); отображается html-код самого шаблона, то есть код шаблона, созданного с помощью twig. Я не понимаю почему. Как получить требуемые данные: 'test ok'?

P.S. : Я еще не использую учетные данные (username и password), я просто делаю тесты, я хочу, чтобы сначала запрос AJAX работал.