Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre à l'essai
    Formulaire de connexion et retour requête AJAX
    Bonjour,

    j'ai récupéré le script d'un tuto permettant de simuler une connexion via login et mot de passe. Cela se présente sous forme de 2 fichiers :

    un fichier login.php
    un formulaire demandant de saisir login et mot de passe. puis une requête en ajax est envoyée à un fichier connexion.php qui teste tout simplement, sans accéder à une bdd mysql si les identifiants sont corrects et renvoie une réponse positive ou négative.

    Là où le bât blesse c'est que bien que la requête semble avoir été envoyée, la réponse reçue ne correspond pas aux identifiants que je tape, comme si le traitement n'avait pas été effectué.

    Pouvez-vous m'aider SVP ? merci.

    tout d'abord le fichier login.php

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    <!DOCTYPE html>
    <html>
    <head> 
        <meta charset="utf-8">
        <title>Un formulaire de connexion en AJAX</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
     
    <body>
        <div id="resultat"></div>       <!-- Nous allons afficher un retour en jQuery au visiteur -->
     
     
            <h1>Un formulaire de connexion en AJAX</h1>
     
        <form>
            <p>
            Nom d'utilisateur : <input type="text" id="username" />
            Mot de passe : <input type="password" id="password" />
            <input type="button" id="submit" value="Se connecter !" />
            </p>
        </form>
     
    <script>
     
    $(document).ready(function(){
     
         $("#submit").click(function(e){
                e.preventDefault();
     
                $.ajax({
                        url : 'connexion.php', 
                        type : 'POST',
                // Un script PHP que l'on va créer juste après
                        data : {
                                username : $("#username").val(),  // Nous récupérons la valeur de nos input que l'on fait passer à connexion.php
                                password : $("#password").val()
                                },
     
                        complete : function(data){
     
                                        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 if (data == "Failed")
                                                {
                                                // Le membre n'a pas été connecté. (data vaut ici "failed")
                                                $("#resultat").html("<p>Erreur lors de la connexion...</p>");
                                                 }
                                        else 
                                                {
                                                // Le membre n'a pas été connecté. (data vaut ici "failed")
                                                 $("#resultat").html("<p>Ou est l'erreur ?</p>");
                                                }
     
                                                },
                        dataType :'text'
                        });
                                         });
                                    });
     
    </script>
     
     
    </body>
    </html>


    ensuite le fichier connexion.php

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    <?php
     
        /**
         * Nous créons deux variables : $username et $password qui valent respectivement "Sdz" et "salut"
         */
         
        $username = "Sdz";
        $password = "salut";
     
        console.log($_POST['username']);
        console.log($_POST['password']);
     
        if( isset($_POST['username']) && isset($_POST['password']) ){
     
            if($_POST['username'] == $username && $_POST['password'] == $password){ // Si les infos correspondent...
                session_start();
                $_SESSION['user'] = $username;
                echo "Success";    
            }
            else{ // Sinon
                echo "Failed";
            }
        }
    ?>

  2. #2
    Membre actif
    Salut,
    Il me semble que tu ne passes pas tes variables correctement :

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    data : {
       username : $("#username").val(),  // Nous récupérons la valeur de nos input que l'on fait passer à connexion.php
       password : $("#password").val()
    },


    Essaies plutôt :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
     
    data : 'username='+$("#username").val()+'&password='+$("#password").val(),
    dataType : 'text'



    http://api.jquery.com/jquery.ajax/

    data
    Type: PlainObject or String or Array
    Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

  3. #3
    Modérateur

    Bonjour,

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    console.log($_POST['username']);
    console.log($_POST['password']);

    que font ces lignes dans un fichier PHP ?

    Attention également a ce qu'il n'y ait pas de ligne vide avant <?php.

    Pour ce qui est de la partie JavaScript, tu utilises mal le retour disponible dans le complete, tu devrais avoir :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    complete : function(jqXHR){  // voir la documentation
        data = jqXHR.responseText;


    Comme on est au XXI e siècle, tu aurais intérêt à utiliser une version récente, 3.x, de jQuery et de passer par la méthode done.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    $(document).ready(function() {
     
      $("#submit").click(function(e) {
        e.preventDefault();
     
        $.ajax({
            url: 'connexion.php',
            type: 'POST',
            dataType: 'text',
            // Un script PHP que l'on va créer juste après
            data: {
              username: $("#username").val(), // Nous récupérons la valeur de nos input que l'on fait passer à connexion.php
              password: $("#password").val()
            }
          })
          .done(function(data) {
            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 if (data == "Failed") {
              // Le membre n'a pas été connecté. (data vaut ici "failed")
              $("#resultat").html("<p>Erreur lors de la connexion...</p>");
            }
            else {
              // Le membre n'a pas été connecté. (data vaut ici "failed")
              $("#resultat").html("<p>Ou est l'erreur ?</p>");
            }
          })
      });
    });

  4. #4
    Membre à l'essai
    formulaire de connexion correctifs effectués mais cela ne focntionne pas
    grinder 59 et Nosmoking

    j'ai suivi vos conseils et effectué quelques correctifs : bilan pas d'erreurs de signalées mais la validation de la connexion ne s'effectue pas malgré l'entrée des bons identifiants.

    les fichiers corrigés :

    login.php

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <!DOCTYPE html>
    <html>
    <head> 
        <meta charset="utf-8">
        <title>Un formulaire de connexion en AJAX</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
     
    <body>
        <div id="resultat"></div>       <!-- Nous allons afficher un retour en jQuery au visiteur -->
     
     
            <h1>Un formulaire de connexion en AJAX</h1>
     
        <form>
            <p>
            Nom d'utilisateur : <input type="text" id="username" />
            Mot de passe : <input type="password" id="password" />
            <input type="button" id="submit" value="Se connecter !" />
            </p>
        </form>
     
    <script>
     
    $(document).ready(function() {
     
      $("#submit").click(function(e) {
        e.preventDefault();
     
        $.ajax({
            url: 'connexion.php',
            type: 'POST',
            
            // Un script PHP que l'on va créer juste après
            data: {
              username: $("#username").val(), // Nous récupérons la valeur de nos input que l'on fait passer à connexion.php
              password: $("#password").val()
            },
            dataType: 'text'
          })
          .done(function(data) {
            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 if (data == "Failed") {
              // Le membre n'a pas été connecté. (data vaut ici "failed")
              $("#resultat").html("<p>Erreur lors de la connexion...</p>");
            }
            else {
              // Le membre n'a pas été connecté. (data vaut ici "failed")
              $("#resultat").html("<p>Ou est l'erreur ?</p>");
            }
          })
      });
    });
    </script>
     
     
    </body>
    </html>


    connexion.php

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <?php
        $username = "Sdz";
        $password = "salut";
    //
        //console.log($_POST['username']);
        //console.log($_POST['password']);
     //
        if( isset($_POST['username']) && isset($_POST['password']) ){
     
            if($_POST['username'] == $username && $_POST['password'] == $password){ // Si les infos correspondent...
                session_start();
                $_SESSION['user'] = $username;
                echo "Success";    
            }
            else{ // Sinon
                echo "Failed";
            }
        }
    ?>

  5. #5
    Membre émérite
    Salut,
    Tu es sûr ? parce que je viens de tester avec les bons identifiants et je reçois bien les messages "Success" ou "Failed" depuis le fichier php.

    Il y'a une fonction trim() qui efface les espaces avant et après une chaîne de caractère, si jamais tu met des espaces dans les identifiants sans faire attention, trim les corrige.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    data: {
              username: $("#username").val().trim()
              password: $("#password").val().trim()
            }

  6. #6
    Membre à l'essai
    Bonsoir,
    merci à tous ça fonctionne désormais.

###raw>template_hook.ano_emploi###