Formulaire de connexion et retour requête AJAX

**syllabozoo** · 11/06/2019, 09h24

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";
        }
    }
?>

**grinder59** · 11/06/2019, 13h46

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).

**NoSmoking** · 11/06/2019, 15h25

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>");
        }
      })
  });
});

**syllabozoo** · 11/06/2019, 16h43

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";
        }
    }
?>

**Toufik83** · 11/06/2019, 17h11

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()
        }

**syllabozoo** · 11/06/2019, 21h28

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

Formulaire de connexion et retour requête AJAX [AJAX]

jQuery

Discussions similaires

Partager

Partager