[AJAX] Requête SQL avec AJAX

Version imprimable

Bonjour,

Je cherche à vérifier si le nom saisie par un utilisateur existe déjà dans ma base de données en même temps qu'il saisie.

Pour cela j'essaye d'utiliser ajax mais malgré toutes mes recherches j'ai un peu de mal à comprendre tous le fonctionnement et à prendre des repères.

Voici comment j'ai commencé mon code :

Code Html suivi de la fonction Javascript

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
 
				<form action="ActionStages/EnregistrementAdherent.php" method="post" name="FormInscription">
 
					<!-- Informations à complété -->
					<label for="Nom">Nom :</label> <input type="text" name="Nom" id="Nom" onkeyup="VerifNomSQL()"/><br />
					<label for="Prenom">Prénom :</label> <input type="text" name="Prenom" id="Prenom" /><br />
</form>
 
<script language="javascript" type="text/javascript">
		//-------------------------------Creation instance avec Ajax-------------------------------------
		//Objectif ==> Interroger le serveur sans recharger la page
				function VerifNomSQL() { 
			//1.récupération des valeurs sasies
				var Saisie = document.FormInscription.Nom.value;
 
			//2. On creer l'instance en intérrogeant le systeme client (Id Navigateur utilisé)
			if (window.XMLHttpRequest)    //  Objet standard
			{ 
			    xhr = new XMLHttpRequest();   //  Firefox, Safari, ...
			} 
			else 
			   if (window.ActiveXObject)      //  Internet Explorer
			   {
			      xhr = new ActiveXObject("Microsoft.XMLHTTP");
			   }
 
			//3.Ouverture du fichier qui execute la requete
			xhr.open("POST", "req.php", true);
 
			//4. Gérer l'état de la connexion au serveur
			//===> Si 4 = ok sinon faire....
			xhr.onreadystatechange = function(){ // instructions de traitement de la réponse
				if (xhr.readyState == 4) { // Reçu, OK
					alert('conect true');
				}
				else { // Attendre...
					alert('en attente');
				}
			};                   
		}    
 
</script>

Problème ==> Je ne sais pas trop comment continuer mon code et transmettre ma variable "Saisie" pour l'utiliser dans ma requete

Et voici la page avec ma requête en 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
 
<?php
 
//
// VERIFICATION EN LIVE DU NOM
//
$i = 0;
// CONNECION SQL
require '../param.php';
 
// VERIFICATION
$req = $bd->query('SELECT * FROM adherents WHERE Nom Like "%' .$_REQUEST["Saisie"].'%"');
while ($recup = $req->fetch())
{
$_SESSION['RsInscrit'] = array(
    $i  => array(
        "Login"  => $recup['Login'],
        "Nom"  => $recup['Nom'],
        "Prenom"  => $recup['Prenom'],
        "Adresse" => $recup['Adresse'] . ' ' . $recup['CP'] . ' ' . $recup['Ville']  ),
 
);
$i = $i+1;
}
 
?>

Merci pour votre aide, je suis un peu perdue, en plus j'ai l'impression d'avoir lu plusieurs méthodes différentes et de tous mélanger.

11/07/2011, 13h21
andry.aime

Bonsoir,

Tu as oublié de faire un xhr.send et comme tu l'envoies avec la méthode POST tu dois ajouter xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');.
Sinon, fait attention, à chaque évènement keyup, tu va lancer une requête, pense à faire un abord sur la précédente avant de lancer une nouvelle. Recherche sur ce forum, tu y trouveras comment le faire.

A+.

J'ai rajouté ces éléments sur mon code javacsript :

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
 
//-------------------------------Creation instance avec Ajax-------------------------------------
		//Objectif ==> Interroger le serveur sans recharger la page
		function VerifNomSQL() { 
			//1.récupération des valeurs sasies
				var Saisie = document.FormInscription.Nom.value;
 
			//2. On creer l'instance en intérrogeant le systeme client (Id Navigateur utilisé)
			if (window.XMLHttpRequest)    //  Objet standard
			{ 
			    xhr = new XMLHttpRequest();   //  Firefox, Safari, ...
			} 
			else 
			   if (window.ActiveXObject)      //  Internet Explorer
			   {
			      xhr = new ActiveXObject("Microsoft.XMLHTTP");
			   }
 
			//3.1 Ouverture du fichier qui execute la requete
			xhr.open("POST", "req.php", true);
 
			//3.2 On envoie les headers, ce qui caractérise ce que l'on va envoyer a la page php, en général cela ne change pas. 
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 
			//3.3 On envoie notre variable qui contient l'info que l'on veut envoyer. 
			xhr.send(Saisie); 
 
			//4. Gérer l'état de la connexion au serveur
			//===> Si 4 = ok sinon faire....
			xhr.onreadystatechange = function(){ // instructions de traitement de la réponse
				if (xhr.readyState == 4) { // Reçu, OK
					alert(xhr.responseText);
				}
				else { // Attendre...
					alert('en attente');
				}
			};                   
		}

Je vous ré affiche mon fichier req.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
 
//
// VERIFICATION EN LIVE DU NOM
//
// CONNECION SQL
require '../param.php';
 
// VERIFICATION
$req = $bd->query('SELECT * FROM adherents WHERE Nom Like "%' .$_REQUEST["Saisie"].'%"');
 
 
?>

Problème ==> Aucun résultat ne m'est retournée, aucune des deux alertes ne se déclenche de ma fonction javascript. Je ne suis pas sûre d'avoir compris comment récupérer le résultat de ma requête...

11/07/2011, 15h04
andry.aime

Code:

xhr.send("Saisie="+Saisie);

essaye de taper seulement une caractère pour voir.

A+.
11/07/2011, 15h21
Nanais19
C'était une bibliothèque js que j'avais rajouté qui bloqué l’exécution du code.

J'ai donc mes alertes qui se déclenche correctement, cependant ==> xhr.responseText est vide !!

Sous php le résultat devrai pouvoir se récupérer comme ceci :
Code:

1 2 3 echo $rs['Nom']; echo $rs['Prenom'];
Comment récupérer ce résultat afin de l'afficher dans un div avec innertText ?
11/07/2011, 16h58
Nanais19

Ok enfin compris, en faite c'est tout bête il suffit de faire afficher le résultat de la requête dans un echo !

Sinon merci beaucoup pour l'aide, j'étais vraiment perdue au début et perturber de ne pas comprendre ces petits détails !