Ajax : récupérer des data après traitements [Résolu]

[iviewclear]

Bonjour à tous

Bon je viens de me coltiner tout ce que j'ai pu sur le sujet sans trouver de solution à mon souci simple.

Bon j'ai un formulaire d'identification simple avec 2 input

Code :

1
2
3
4
5
6
7
8
9
10
11
<form id="formconnexion">
                <div class="server-info" id="resultat">Connectez-vous !</div>
                <div class="server-info">identifiant&nbsp;
                	<input type="text" name="login" id="login2" style="font-size: smaller; width: 70px;" value=""/></div>
                <div class="server-info">Mot de passe&nbsp;
                	<input type="password" name="pass" id="password2" style="font-size: smaller; width: 70px;" value=""/>
                    <input type="submit" name="connexion" value="Connexion" onchange="go()"/>
                </div>
                <a href="#" class="button red" title="Logout">
                    <span class="smaller">LOGOUT</span></a>
            </form>

Je souhaite envoyer ces info dans un fichier PHP pour traitement afin qu'ensuite je puisse récupérer un morceau de texte à afficher quelque part dans un DIV 'resultat' en foncion du résultat du traitement.

Je me sers donc d'AJAX !!!
et j'ai cela comme fonctions js :

Code :

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
<script type="text/javascript">
 
    function getXMLHttpRequest() {
    	var xhr = null;
 
    	if (window.XMLHttpRequest || window.ActiveXObject) {
    		if (window.ActiveXObject) {
    			try {
    				xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch(e) {
    				xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			}
    		} else {
    			xhr = new XMLHttpRequest(); 
    		}
    	} else {
    		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
    		return null;
    	}    	
    	return xhr;
    }   
 
    function go(){
		var xhr = getXMLHttpRequest();
		// On défini ce qu'on va faire quand on aura la réponse
		xhr.onreadystatechange = function(){
			// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){			
			txtAafficher = xhr.responseText;
				document.getElementById('resultat').innerHTML = txtAafficher;
				alert(txtAafficher);
			}
			else {
				alert('There was a problem with the request.');
			}
		}
 
		// Ici on va voir comment faire du post
			xhr.open("POST","page.php",true);
		// ne pas oublier ça pour le post
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// POST des arguments
		// ici, le login et le mot de passe
		// Cette forme-là
			var argLogin = encodeURIComponent(document.getElementById('login2').value);
			var argPass = encodeURIComponent(document.getElementById('password2').value);
		// ou celle-ci
		// var login = encodeURIComponent(document.getElementById("login2").value);
    	// var pass = encodeURIComponent(document.getElementById("password2").value);
			var data = "login=" + argLogin + "&pwd" + argPass;
			xhr.send(data);			
	}     
    </script>

Et mon fichier PHP est celui-ci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php 
 
	header("Content-Type: text/plain");
 
	$login 	= (isset($_POST["login"])) 	? $_POST["login"] 	: NULL;
	$pass 	= (isset($_POST["pass"])) 	? $_POST["pass"] 	: NULL;
 
	if ($login && $pass) {
		echo "Bonjour " . $login . " ! Je vois que votre mot de passe est " . $pass;
	} else {
		echo "FAIL";
	}
?>

Alors mon souci :
Mon URL de départ est du style localhost/dossierXX/ dans lequel donc réside mon index.php
Après avoir cliqué sur mon bouton de formualaire mon URL devient
'http://localhost/AA_Template-Constellation/php/?login=admin&pass=aaaaa&connexion=Connexion'
Donc je ne comprends pas pourquoi ce comportement vu que je suis en POST
Auriez-vous une idée ?

Et mon résultat ne s'affiche pas dans mon div resultat

Auriez-vous une idée ?
Merci d'avance

[Bovino]

Le rôle d'un bouton de type submit est de soumettre un formulaire, donc quand tu cliques sur "Connexion", le formulaire est soumis...
Or ton form n'a ni attribut method ni attribut action, le formulaire est donc soumit avec les valeurs par défaut : en GET sur la page courante, d'où le changement d'URL tout à fait logique.
Ensuite, il y a un autre souci : tu lances la fonction go() sur le onchange du bouton submit ! Et je vois mal comment un bouton submit peut changer de valeur donc ta fonction n'est jamais lancée...

Les solutions :
* En conservant un bouton submit.
Cette méthode est utile pour pouvoir laisser une alternative de connexion aux visiteurs n'ayant pas JavaScript activé.
Il faut que tu renseignes les attributs action et methos de la balise form de façon à envoyer vers une page PHP traitant la connexion.
Ensuite, tu lances la fonction go() soit sur l'événement onsubmit du formulaire, soit sur le onclick du submit et tu annules la soumission avec un return false :

Code :

<input type="submit" name="connexion" value="Connexion" onclick="go();return false;"/>

* Sans bouton submit.
Tu peux aussi faire le choix de ne se conncter qu'avec AJAX et de ne pas te préoccuper des quelques visiteurs sans JavaScript. Dans ce cas, tu peux utiliser un bouton de type "button" à la place du submit :

Code :

<input type="button" name="connexion" value="Connexion" onclick="go()"/>

[iviewclear]

Merci pour ton aide

J'ai donc retenu comme solution celle avec Ajax

Code :

<input type="button" name="connexion" value="Connexion" onclick="go()"/>

Pour le formulaire avec method et action, je pensais que la ligne suivante faisait le travail :

Code :

1
2
 
xhr.open("POST","page.php",true);

Mais non alors ?


Sinon j'ai corrigé une erreur dans mon code
Maintenant, il s'avère que je passe 3 fois dans le test There is a problem...
puis ensuite j'affiche bien mon alert et surtout je mets à jour mon div
Mais pourquoi ces 3 messages au préalable ?
Une idée ???

merci beaucoup !!!

[iviewclear]

Bon mon souci a été résolu non pas avec une explication mais en refaisant tout le code en m'inspirant d'une autre source

[Bovino]

Envoyé par iviewclear

Maintenant, il s'avère que je passe 3 fois dans le test There is a problem...
puis ensuite j'affiche bien mon alert et surtout je mets à jour mon div
Mais pourquoi ces 3 messages au préalable ?
Une idée ???

Tester si le readyState est égal à 4 implique qu'il existe des états 1, 2 et 3, donc dans chacun de ces cas, tu passes dans le else

[iviewclear]

Envoyé par Bovino

Tester si le readyState est égal à 4 implique qu'il existe des états 1, 2 et 3, donc dans chacun de ces cas, tu passes dans le else

Ah bon ???
Mais je n’arrête pas de voir des codes comme cela...Bon cela ne veut pas forcément dire que c'est bon du coup.....la preuve
Que dois-je modifier alors ????
Car je pensais que je faisais mal quelque chose !!!
Et merci pour ta réponse qui me réconforte un peu sur les 2 jours que j'ai passé dessus

[Bovino]

Mais je n’arrête pas de voir des codes comme cela

Oui, la plupart des codes se contentent de tester si le readyState est à 4, mais ils n'affichent pas d'alert dans le cas contraire !
Du coup, si tu ne fais rien pour ces cas, il ne se passera rien