[AJAX] Accés à une page via user et mot de passe avec ajax

Version imprimable

Bonjour tout le monde

Je souhaiterais acceder à une page admi avec ajax.

Voici mes codes.

mon formulaire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<form name="connex" id="connex">
<input type="text" name="nom" id="nom" />
 
 <input type="password" name="mdp" id="mdp"/>
 
<select name="choiuser" id="choiuser">
 
<option value="Administrateur"> Administrateur</option>
  <option value="utilisateur"> utilisateur</option>
   </select>
 
 <input type="button" name="btcon" onClick="acceAdmiuser();" id="btcon" value="accés" />
 
 
</form>

fichier javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function creationXHR() {
   var resultat=null;
   try {
	    resultat= new XMLHttpRequest();
     } 
     catch (Error) {
     try {
     resultat= new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (Error) {
         try {
         resultat= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (Error) {
            resultat= null;
         }
     }
  }
return resultat;
}

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
54
55
56
57
58
59
60
61
62
63
64
 
window.onload=testerNavigateur;
 
 
 
function testerNavigateur() {   
	objetXHR = creationXHR();
	if(objetXHR==null) {
		document.getElementById("btcon").disabled= true;
		var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
		remplacerContenu("info", erreurNavigateur);
	    document.getElementById("info").style.visibility="visible";
	}
 
 
}
 
 
 
function acceAdmiuser(){
 
 
 
	if(document.getElementById('nom').value == ""){
 
			document.getElementById('user').style.visibility="visible";
 
 
	}else if(document.getElementById('mdp').value == ""){
 
			  document.getElementById('mp').style.visibility="visible";
 
 
 
	}else{
 
 
 
		  choixAcces();
	}
 
}
 function choixAcces(){
 
 
	if(document.getElementById('choiuser').options[document.getElementById('choiuser').selectedIndex].value == "Administrateur"){
 
 objetXHR = creationXHR();
 
 
var parametres ="nom" +"mdp";
 
 
 
 objetXHR.open("get","loginadmi.php?"+parametres, true);
 
 
 objetXHR.send(null);
 
 
 
			         }
 
 }

fichier php

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
54
55
56
57
58
59
60
61
62
63
 
<?php
 
header("Pragma:no-cache");
 
$Connexion = mysql_connect("localhost", "root", "");
 
$connexionbase = mysql_select_db("testbdd");
 
 
 
if(!empty($_POST['nom']) && !empty($_POST['mdp'])) 
 
{
 
$username = $_POST['nom'];
$password = $_POST['mdp'];
 
$sql = "select passw from log where identifiant='".$username."'";
 
 
 
 
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
 
  $data = mysql_fetch_assoc($req);
 
 
if($data['mdp'] != $password) {
 
 echo "<p>Mauvais login / password. Merci de recommencer</p>";
 
 
 
 
    include ("erreurconnex.html");
 
 
  exit;
  }
 
else {
    //session_start();
    $_SESSION['nom'] = $username;
 
 
 
	include ("supadm.php");
 
 
  }    
}
 
else {
  echo "<p>Vous avez oublié de remplir un champ.</p>";
 
    include ("erreurconnex.html");
 
   exit;
}
 
 
?>

Mon soucis est que rien ne ce passe.

Que manque t'il?

A +

12/04/2009, 12h11
beegees

Salut,

La toute première chose que tu dois faire ==> vérifier si tu arrives bien dans ta fonction javascript nommée acceAdmiuser().

Pour cela, tu fais :

alert("j'arrive ici");

Si l'alerte se lance, c'est que tu arrives dans la fonction, autrement, c'est que tu ne l'a pas déclarée dans le head avec ce code :

Code:

<script type="text/javascript" src="pageJs.js"></script>

Quand tu as fait ça, tu me donnes le résultat et on verra si on peut avancer.

++

beegees
12/04/2009, 12h16
argon

Rebonjour

J'ai déja testé, j'arrive bien à la fonction.

Je ne vous ais pas donné tout le code de la page html, car je souhaite pas vous donner une migraine le dimanche.

Je pense que mon problème vient de l'interaction entre mon script javascript et php.

A +

Re,

Citation:

J'ai déja testé, j'arrive bien à la fonction.

Tu ne l'avais pas indiqué dans ton message, c'est pourtant une étape importante.

Essaie stp de soigner l'indentation de ton code.

Je ne vois pas que tu as créé un objet qui récupère le retour de ton fichier PHP 8O

Voici un fichier js qui contient du bon code pour utiliser AJAX :
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 function afficher_erreurs(ID) { //alert(ID); var xhr = getXhr(); // 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 //alert(xhr.readyState); //alert(xhr.status); if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0 ) ) { erreurs = xhr.responseText; //alert(erreurs); document.getElementById('erreurs').innerHTML = '<font size="+6" color="#FF0000">' + erreurs + '</font>' ; } } //Pour montrer une erreur, je pourrais retirer /PENDU et faire un alert de status xhr.open("POST","AJAX/PENDU/aff_erreurs.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send("ID="+ID); }
tu devrais LARGEMENT t'en inspirer.

tu retourne du texte ou de l'XML ?

Tu as déjà utilisé AJAX ?

beegees

Bonjour tout le monde

Voici les modification

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
if(document.getElementById('choiuser').options[document.getElementById('choiuser').selectedIndex].value == "Administrateur"){
 
		 objetXHR2 = creationXHR();
 		var temps = new Date().getTime();
 
		var parametres = "nom="+ codeContenu("nom") + "mdp="+ codeContenu("mdp") + "&anticache="+temps;
 
 		objetXHR2.open("get","ConnexAdmis.php?"+parametres, true); 
 		objetXHR2.onreadystatechange = afficherReponse;
 
		document.getElementById("btcon").disabled= true;
 
 
		objetXHR2.send(null);
 
 
			         }

Une nouvelle fonction

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
 
function afficherReponse() {
 
	if (objetXHR2.readyState == 1){
 
 
		if (objetXHR2.status == 200) {
	   		var nouveauResultat = objetXHR2.responseText;
 
 
 
				if(nouveauResultat==0) {
 
 
			document.getElementById("info").style.visibility="visible";
 
		remplacerContenu("info", "Pas droits");
		 document.getElementById("info").style.color="red";
 
		document.getElementById("btcon").disabled= true;
 
     }
 
   }
 }
 
 
}

Modification du fichier php:

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
54
55
56
 
<?php
 
header("Content-Type: text/plain ; charset=utf-8");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
 
 
if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'];
 
 
 
   else $nom="inconnu";
 
 
if(isset($_REQUEST['mdp'])) mdps=$_REQUEST['mdp'];
 
    else mdps="inconnu";
 
require_once('connexionMysql.php');
 
mysql_select_db($base);
 
 
$requeteSQL="SELECT passw FROM log WHERE identifiant= '".$nom."'";
 
$reponseSQL = mysql_query($requeteSQL);
 
$data = mysql_fetch_assoc($req);
 
 
if($data['mdp'] != mdps) {
 
 
$id =0;
 
echo $id;
 
exit;
}
else {
 
 
$_SESSION['nom'] = $nom;
    
 
 
        include ("supadm.html");
 
 
  } 
 
 
 
 
?>

Fichier fonctionajax.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
 
 
function creationXHR() {
   var resultat=null;
   try {
	    resultat= new XMLHttpRequest();
     } 
     catch (Error) {
     try {
     resultat= new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (Error) {
         try {
         resultat= new ActiveXObject("Microsoft.XMLHTTP");
         }
         catch (Error) {
            resultat= null;
         }
     }
  }
return resultat;
}
 
function remplacerContenu(id, texte) {
  var element = document.getElementById(id);
  if (element != null) {
    supprimerContenu(element);
    var nouveauContenu = document.createTextNode(texte);
    element.appendChild(nouveauContenu);
  }
}
function codeContenu(id) { 
	var valeur=document.getElementById(id).value;
	return encodeURIComponent(valeur);
}
function supprimerContenu(element) {
if (element != null) {
    while(element.firstChild)
        element.removeChild(element.firstChild);
   }
}

Lors du teste j'ai une erreur.

L'erreur se situe dans la fonction afficherReponse() au niveau des instructions if.

A +

14/04/2009, 15h00
beegees

Salut,

Pour tester si c'est 1 ?

Code:

if (objetXHR2.readyState == 1){

C'est 4 la valeur que tu dois atteindre !!!

beegees

Bonsoir

Concernant la partie javascript, je n'ais plus d'erreur.

Mon problème est que ca ne fonctionne pas.

Je vous rappelle ce que je souhaite faire.

Au départ je suis sur la page index.html, en saissant le bon nom utilisateur et le mot de page, je veux acceder à la page supadm.html, si le nom utilisateur et mot de passe sont incorect, je souhaite le signaler.

Voici la partie php:
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 54 55 56 57 <?php header("Content-Type: text/plain ; charset=utf-8"); header("Cache-Control: no-cache , private"); header("Pragma: no-cache"); if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom']; else $nom="inconnu"; if(isset($_REQUEST['mdp'])) mdps=$_REQUEST['mdp']; else mdps="inconnu"; require_once('connexionMysql.php'); mysql_select_db($base); $requeteSQL="SELECT passw FROM log WHERE identifiant= '".$nom."'"; $reponseSQL = mysql_query($requeteSQL); $data = mysql_fetch_assoc($reponseSQL); if($data['mdp'] != mdps) { $id =0; echo $id; exit; } else { $_SESSION['nom'] = $nom; include ("supadm.html"); } ?>
Pourriez vous me dire quels sont les erreur à ma partie php?

Merci.

A +

15/04/2009, 14h50
amezghal

Salut,
ya pas un truc qui empeche ton "form" de se validé et du coup recharger la page..
essaye d'ajouter dans ton form un onsubmit='appel fonstions js; return false'

Bonjour

Mon problème vient de php.

Voici le code php:

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
 
 
<?php
 
header("Content-Type: text/plain ; charset=utf-8");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
 
 
if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'];
 
 
 
else $nom="inconnu";
 
 
if(isset($_REQUEST['mdp'])) mdps=$_REQUEST['mdp'];
 
else $mdps="inconnu";
 
require_once('connexionMysql.php');
 
mysql_select_db($base);
 
 
$requeteSQL="SELECT ke FROM log WHERE identifiant= '".$nom."'" AND passw='".$mdps."'";
 
$reponseSQL = mysql_query($requeteSQL);
 
$enregistrement=mysql_fetch_array($reponseSQL);
 
 
 
 
 
 if(mysql_num_rows($reponseSQL)>0){
 
 $resultat=$enregistrement["ke"];
 
}
 else{
 
 
 $resultat=0;
}
 echo $resultat;
 
 
 
?>

Je pense qu'il faut que je créé une fonction qui récupére les données des variable transmis par js et luis renvois le résultat en retour.

A +

20/04/2009, 21h40
argon

Bonsoir

Vu que vous ne pouvez pas m'aider pour php, je vais poser ma question sur le bon forum.

A +