Symfony 未定义 AJAX 值

Question

I actually try to make an custom authentication using AJAX and Symfony but I have a problem that I can't even identify. It seems that the AJAX part doesn't find the route because my browser console can't "recognize" my route script. I tried to identify AJAX data compared to input fields data and the problem is that AJAX returns undefined values. I'll put the different parts of my code below :

Twig modal with AJAX script :

<div class="modal fade" tabindex="-1" role="dialog" id="loginModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Connexion</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body" align="center">
                <form action="#" method="POST">
                    <label for="pseudoMail">Pseudo ou e-mail : </label>
                    <input type="text" id="pseudoMail" placeholder="Pseudo ou e-mail" name="pseudoMail" required><br>
                    <label for="mdp">Mot de passe : </label>
                    <input type="password" id="mdp" placeholder="Mot de passe" name="mdp" required><br>
                    <input type="submit" class="btn btn-primary" id="login" value="Se connecter" />
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('js/jquery-3.5.1.min.js') }}"></script>
<script>

    $(document).ready(function () {
        $("#login").click(function()
        {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: 'POST',
                url: '{{ path('checkLogin') }}',
                data: {
                    pseudo: $("input#pseudoMail").val(),//TODO Remplir l'Ajax de façon à ce que les données soient reconnues
                    motdepasse: $("input#mdp").val()
                },
                dataType: 'json',

                success: function(data)
                {
                    if(data.pseudo !== "" && data.motdepasse !== "")//TODO Modifier la condition et jouer les sons correspondants (dossier sfx)
                    {
                        setTimeout(alert("Vous êtes connecté !"), 5000);
                        var sound = document.createElement('audio');
                        sound.setAttribute('src', 'https://themushroomkingdom.net/sounds/wav/smb/smb_1-up.wav');
                        sound.play();
                    }
                    else
                    {
                        alert("Les identifiants ne correspondent pas. Veuillez réessayer.");
                        var sound = document.createElement('audio');
                        sound.setAttribute('src', 'https://themushroomkingdom.net/sounds/wav/smb/smb_fireworks.wav');
                        sound.play();
                    }
                },
                error: function(data)
                {
                    console.log("Pseudo : " + data.pseudo);
                    console.log("Mot de passe : " + data.motdepasse);
                    console.log("Pseudo sans data : " + $('input#pseudoMail').val());
                    console.log("Mot de passe sans data : " + $('input#mdp').val());
                    console.log(data);
                    alert("Erreur détectée ! " + data);
                }
            });
        });
    });
</script>

The PHP script :

    /**
     * @Route("/checkLogin", name="checkLogin")
     */
    public function checkLogin(Request $request, SessionInterface $session)//TODO vérifier les connexions pour mesures de sécurité ?
    {
        $pseudoMail = $request->request->get('pseudoMail');
        $motdepasse = $request->request->get('mdp');
        $repo = $this->getDoctrine()->getRepository(Utilisateur::class);
        $pseudoDB = $repo->findOneBy(["pseudo" => $pseudoMail]);
        $mailDB = $repo->findOneBy(["email" => $pseudoMail]);
        $motdepasseDB = $repo->findOneBy(["motDePasse" => $motdepasse]);
        if (($pseudoDB && $motdepasseDB) || ($mailDB && $motdepasseDB))
        {
            $session->set('login', true);
            /*return $this->render('boutique/index.html.twig', [
                'controller_name' => 'BoutiqueController',
            ]);*/
            var_dump($pseudoMail . "-" . $motdepasse);
            return new JsonResponse(array('pseudo' => $pseudoMail, 'motDePasse' => $motdepasse));
        }
        else
        {
            $session->set('login', false);
            //$this->addFlash('flash', "Login incorrect. Veuillez réessayer.");
            /*return $this->render('accueil/index.html.twig', [
                'controller_name' => 'AccueilController',
            ]);*/
            return new Response("Problème !");
        }
    } 

Answer 1

As charlietfl said, you get different keys between your AJAX code and your PHP code. They should equal.

data: {
      pseudo: $("input#pseudoMail").val(),
      motdepasse: $("input#mdp").val()
},

In your AJAX request, keys are pseudo and motdepasse . So, in your PHP code, you should use those keys like that:

$pseudoMail = $request->request->get('pseudo');
$motdepasse = $request->request->get('motdepasse');