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

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

jQuery

Mode arborescent

Discussions similaires

Partager

Partager