Partage
  • Partager sur Facebook
  • Partager sur Twitter

ma requête ajax ne fonctionne pas

    18 juin 2019 à 8:03:19

    Bonjour, j'étais entrain de suivre ce cours d'openclassrooms sur la vérification et la validation du formulaire de connexion avec Ajax

    :  https://openclassrooms.com/fr/courses/1567926-un-site-web-dynamique-avec-jquery/1569693-cas-concret-un-formulaire-de-connexion-avec-ajax

    J'ai suivi les exemples du TD de A à Z. Mais contrairement au prof, le code ne fonctionne pas pour moi. Ma requête Ajax n'est pas fonctionnelle. Vous pouvez m'aider à identifier le pourquoi du comment parce que moi je n'y arrive clairement pas ?

    Voici mes codes HTML/AJAX et PHP:

    <body>
    
    <div id="resultat">
    
            <!-- Nous allons afficher un retour en jQuery au visiteur -->
    
        </div>
    
        <h1>Un formulaire de connexion en AJAX</h1>
    
        <form>
    
        <p>
    
            Pseudo : <input type="text" id="pseudo" />
    
            Mot de passe : <input type="password" id="passwd" />
    
            <input type="submit" id="submit" value="Se connecter !" />
    
        </p>
    
        </form>
    
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    
        <script>
    
    $(document).ready(function(){
    
        $("#submit").click(function{
    
            $.post(
    
                'traitement_connexion2.php', // Un script PHP que l'on va créer juste après
    
                {
    
                    pseudo : $("#pseudo").val(),  // Nous récupérons la valeur de nos inputs que l'on fait passer à connexion.php
    
                    passwd : $("#passwd").val()
    
                },
    
                function(data){ // Cette fonction ne fait rien encore, nous la mettrons à jour plus tard
    
               if(data == 'Success'){
    
                         // Le membre est connecté. Ajoutons lui un message dans la page HTML.
    
                         $("#resultat").html("<p>Vous avez été connecté avec succès !</p>");
    
                    }
    
                    else{
    
                         // Le membre n'a pas été connecté. (data vaut ici "failed")
    
                         $("#resultat").html("<p>Erreur lors de la connexion...</p>");
    
                    }
    
                },
    
                'text' // Nous souhaitons recevoir "Success" ou "Failed", donc on indique text !
    
             );
    
        });
    
    });
    
    </script>
    
    

     Voici mon code PHP :

    <?php
    
        /**
    
         * Nous créons deux variables : $username et $password qui valent respectivement "Sdz" et "salut"
    
         */
    
        $username = "Sdz";
    
        $password = "salut";
    
        if( isset($_POST['pseudo']) && isset($_POST['passwd']) ){
    
            if($_POST['pseudo'] == $username && $_POST['passwd'] == $password){ // Si les infos correspondent...
    
                session_start();
    
                $_SESSION['user'] = $username;
    
                echo "Success";    
    
            }
    
            else{ // Sinon
    
                echo "Failed";
    
            }
    
        }
    
    ?>



    -
    Edité par fathismael 18 juin 2019 à 16:41:35

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 18 juin 2019 à 8:18:04

      Bonjour,

      Merci de colorer votre code à l'aide du bouton Code

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

      Mauvais titre

      Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture. Et ne pas contenir d'abréviations non-compréhensibles (ici, "co").

      Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

      De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

      Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

      Pour modifier votre titre, éditez le premier message de votre sujet.

      (titre originel : Formulaire de co avec ajax)

      • Partager sur Facebook
      • Partager sur Twitter
      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
        18 juin 2019 à 10:21:11

        Lamecarlate a écrit:

        Bonjour,

        Merci de colorer votre code à l'aide du bouton Code

        Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: jscript;">Votre code ici</pre>.

        Mauvais titre

        Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture. Et ne pas contenir d'abréviations non-compréhensibles (ici, "co").

        Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

        De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

        Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

        Pour modifier votre titre, éditez le premier message de votre sujet.

        (titre originel : Formulaire de co avec ajax)


        Bonjour Lamecarlate, 

        Au temps pour moi. J'utilise mon téléphone et j'ai pas trouvé l'icône </>, c'est pourquoi mon code est comme il est. Mais je vais le modifier sur mon pc. Pour le titre, je manquais d'inspiration.

        Merci du rappel à l'ordre. 

        • Partager sur Facebook
        • Partager sur Twitter
          Staff 18 juin 2019 à 11:17:18

          > J'utilise mon téléphone et j'ai pas trouvé l'icône </>

          Ah, c'est bon à savoir :) ça peut expliquer, et aider à notre bienveillance dans l'équipe de modération.

          Est-ce que la connexion fonctionne si tu le fais "classiquement", sans JS ?

          • Partager sur Facebook
          • Partager sur Twitter
          Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
            18 juin 2019 à 13:04:51

            Classiquement, avec les attributs action et method, ça marche. Mais je crois le problème se situe au niveau de la requête AJAX.

            Le problème se situait au niveau de ma balise. Il manquait l'attribut "type".

            <script type="text/javascript">

            Par-contre, là j'ai un autre problème. J'ai le résultat de ma requête AJAX que pendant le click sur le bouton "connexion". C'est-à-dire, quand je relâche la souris le résultat ne reste pas mais il disparaît automatiquement.

            -
            Edité par fathismael 18 juin 2019 à 17:03:49

            • Partager sur Facebook
            • Partager sur Twitter

            ma requête ajax ne fonctionne pas

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown