[AJAX] Formulaire d'identification en AJAX

**akrogames** · 08/09/2007, 19h06

Bonjour a vous tous,
comment allez vous ? Moi je viens de finir un script en AJAX Mais comme je débute dans ce genre de programmation j'aurais besoin d'un peu d'aide.

En fait j'ai fais un formulaire d'identification simple pour tester la puissance d'AJAX.mais apperement mon script ne marche pas sous mozilla/firefox et sous IE il me dit toujours "usage ..." Le message d'erreur de mon code PHP.

Enfin je vais vous poster pour que cela soit plus parlant pour vous.

Code la page identifier.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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<?php
sleep(2);
 
if(array_key_exists("login",$_POST) && array_key_exists("motPasse", $_POST)) {
        $user = get_user($_POST["login"], $_POST["motPasse"]);
        
        if($user) {
                connecter_user($user);
        }
        repondre($user);
}
else {
        echo "usage: $_SERVER[PHP_SELF]?login=...&motPasse...";
}
 
//MODELE
function get_user($login, $motPasse) {
        $user = null;
        if($login == "akro" && $motPasse == "akro") {
                $user = array("id" => 1, "login" => "akro");
        }
        return $user;
}
 
function connecter_user($user) {
        //OK connecting OK
}
 
 
//VUE
function repondre($user) {
        if($user) {
                echo "Utilisateur connectee";
        }
        else {
                echo "Utilisateur INCONNU ou MDP faux";
        }
}
?>

et voiçi le code de la page panier.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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<title>panier </title>
 
<style type="text/css">
 
button {
	width: 12ex;
	height: 2em;
	margin: 0ex 1ex 0x 1ex;
}
 
#panier {
	text-align: center;
	font-size: 120%;
	background: #FAF0F5;
}
</style>
 
<script type="text/javascript">
 
//La requete HTTP
var requete;
 
function identifier() {
	requete = getRequete();
	if(requete != null) {
		//Constituer le corps de la requete
		var login = document.getElementById("login").value;
		var MotPasse = document.getElementById("MotPasse").value;
		var corps = "login=" + encodeURIComponent(MotPasse);
 
		try {
			//ouvrir une connexion asynchrone
			requete.open("POST", "identifier.php", true);
			requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			requete.onreadystatechange = onIdentifier;
			requete.send(corps);
			montrerActivite();
		}
		catch (exc) {
			montrerInactivite();
		}
	}
	else {
		setMessage("Impossible de se connecter aus erveur");
	}
}
 
//Ce qui sexecutera lorsque la réponse arrivera
function onIdentifier() {
	if(requete.readyState == 4 && requete.status == 200) {
		//Montrer que la requete est terminee
		montrerInactivite();
		setMessage(requete.responseText);
	}
}
 
//Abandonner la requete
function abandonnerIdentifier() {
	if(requete != null) {
		requete.abord();
	}
	montrerInactivite();
	setMessage("Requete abandonnee");
}
 
 
//recuperer la requete existante ou une nouvelle si elle vaut null
function getRequete() {
	var result = requete;
	if(result == null) {
		if(window.XMLHttpRequest) {
			result = new XMLHttpRequest();
		}
		else if(window.ActiveXObject) {
			result = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return result;
}
 
//Mettre les boutons dans l'etat initial
function montrerInactivite() {
	document.getElementById("identifierOff").style.display = "inline";
	document.getElementById("identifierOn").style.display = "none";
	document.getElementById("boutonAbandonnerIdentifier").disabled = true;
}
 
//Montrer que la requete est en cours
function montrerActivite() {
	document.getElementById("identifierOff").style.display = "none";
	document.getElementById("identifierOn").style.display = "inline";
	document.getElementById("boutonAbandonnerIdentifier").disabled = false;
	setMessage("");
}
 
//Affiche un message
function setMessage(msg) {
	document.getElementById("message").innerHTML = msg;
}
 
 
</script>
 
</head>
 
<body onload="montrerInactivite()">
 
	<p id="panier">Zone affichant le panier</p>
<form name="identification" action="javascript:identifier()">
<table border="0">
<tbody>
<tr>
<td>Identifiant</td>
<td><input type="text" id="login"/></td>
</tr>
<tr>
<td>Mot de passe</td>
<td><input type="password" id="motPasse"/></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<button type="submit">
<span id="identifierOff">S'identifier</span>
<img id="identifierOn" src="loading.gif" alt="Identification en cours..."/>
</button>
<button type="button" id="boutonAbandonnerIdentifier" onclik="abandonnerIdentifier()">Annuler</button>
</td>
</tr>
</tbody>
</table>
<div id="message"></div>
</form>
</body>
</html>

J'ai du me tromper quelque part je pense. enfin je sais pas donc je vous demande de l'aide.

Merci a tous bonne fin de journée

**goulmak** · 08/09/2007, 22h10

Salut, après lecture de ton code il semblerait que l'erreur provienne de l'envoie des identifiants.
Dans ta fonction javascript identifier, tu commences par récupérer les valeurs de ton formulaire pour ensuite créer ce qui sera envoyé en méthode post au travers de ta variable corps :

Code php :

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
 
        if(requete != null) {
		//Constituer le corps de la requete
		var login = document.getElementById("login").value;
		var MotPasse = document.getElementById("MotPasse").value;
		var corps = "login=" + encodeURIComponent(MotPasse);
 
		try {
			//ouvrir une connexion asynchrone
			requete.open("POST", "identifier.php", true);
			requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			requete.onreadystatechange = onIdentifier;
			requete.send(corps);
			montrerActivite();
		}
		catch (exc) {
			montrerInactivite();
		}
	}
	else {
		setMessage("Impossible de se connecter aus erveur");
	}

Mais le problème c'est que tu fais un mixe entre le login et le mot de passe, et au final tu envois le mot de passe pour la variable login. La correction serait donc la suivante :

Code php :

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
 
        if(requete != null) {
		//Constituer le corps de la requete
		var login = document.getElementById("login").value;
		var MotPasse = document.getElementById("MotPasse").value;
		var corps = "login=" + encodeURIComponent(login) + "&motPasse=" + encodeURIComponent(MotPasse);
 
		try {
			//ouvrir une connexion asynchrone
			requete.open("POST", "identifier.php", true);
			requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			requete.onreadystatechange = onIdentifier;
			requete.send(corps);
			montrerActivite();
		}
		catch (exc) {
			montrerInactivite();
		}
	}
	else {
		setMessage("Impossible de se connecter aus erveur");
	}

Normalement cette fois-ci tu n'auras plus le message PHP "usage..." car les clés login et motPasse existeront dans le tableau $_POST

**akrogames** · 09/09/2007, 01h04

Re bonsoir
Ah oui je suis un idiot !

Merci a toi de ton aide savoureuse lol

**akrogames** · 10/09/2007, 11h29

Bonjour a vous tous,
c'est encore moi désolé

Dites voir, maintenant que cela marche j'ai un autre problème c'est que en faite

"identification en cours..."

Doit s'afficher dans une div au bas de mon formulaire pendant la connexion et que cela ne s'affiche pas. Vous savez pourquoi ?
Car moi je sèche là.

Bonne fin de journée a tous.

PS: Je suis un boulet j'en suis désolée j'ai trouvé moi même bonne journée quand même

[AJAX] Formulaire d'identification en AJAX

JavaScript

Discussions similaires

Partager

Partager