[AJAX] Ajax : récupérer des data après traitements
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
<input type="text" name="login" id="login2" style="font-size: smaller; width: 70px;" value=""/></div>
<div class="server-info">Mot de passe
<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 !!! :ccool::ccool:
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
