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
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2017
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : septembre 2017
    Messages : 23
    Points : 19
    Points
    19

    Par défaut 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";
            }
        }
    ?>
    Fichiers attachés Fichiers attachés

  2. #2
    Membre actif Avatar de grinder59
    Inscrit en
    septembre 2005
    Messages
    700
    Détails du profil
    Informations forums :
    Inscription : septembre 2005
    Messages : 700
    Points : 210
    Points
    210

    Par défaut

    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

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 747
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 747
    Points : 33 408
    Points
    33 408

    Par défaut

    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
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2017
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : septembre 2017
    Messages : 23
    Points : 19
    Points
    19

    Par défaut 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 expérimenté Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    1 032
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 1 032
    Points : 1 687
    Points
    1 687

    Par défaut

    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
    Homme Profil pro
    Enseignant
    Inscrit en
    septembre 2017
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : septembre 2017
    Messages : 23
    Points : 19
    Points
    19

    Par défaut

    Bonsoir,
    merci à tous ça fonctionne désormais.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [PHP 5.3] Créer un formulaire de recherche avec des menus déroulants
    Par lololasticot dans le forum Formulaires
    Réponses: 3
    Dernier message: 01/04/2012, 15h35
  2. Réponses: 3
    Dernier message: 27/05/2009, 13h31
  3. Réponses: 3
    Dernier message: 02/08/2008, 06h46
  4. créer une class de connexion avec la base de donnée
    Par john_wili dans le forum Débuter
    Réponses: 2
    Dernier message: 19/07/2008, 00h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo