[AJAX] passer plusieurs variables et renvoyer du html

Version imprimable

Bonjour à tous,

Je découvre l'Ajax, car j'ai enfin un peu le temps de m'y mettre, et je souhaiterais comme exercice faire un truc tout simple :

J'ai un lien html qui affiche le genre d'un membre : homme ou femme

Si on clique sur ce lien et qu'on est un homme ca le change en femme et vice et versa.

Aussi lorsque je clique sur le lien, ca met à jour la base de données, en envoyant deux variables : l'ID du membre et le genre

Voici ce que j'ai fait pour l'instant :

Dans mon head :

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
	<script type="text/javascript">
 
		function getXhr(){
			var xhr = null; 
			if(window.XMLHttpRequest) // Firefox et autres
			   xhr = new XMLHttpRequest(); 
			else if(window.ActiveXObject){ // Internet Explorer 
			   try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
					}
			}
			else { // XMLHttpRequest non supporté par le navigateur 
			   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			   xhr = false; 
			} 
			return xhr;
		}
 
		function genre(){
				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
					if(xhr.readyState == 4 && xhr.status == 200){
						alert(xhr.responseText);
					}
				}
				xhr.open("GET","ajax_membre_genre.inc.php?",true);
				xhr.send(null);
			}
 
 
		</script>

mon html :

Code:

1
2
<div id="contenu_genre" style="float:left;">
<a href="#" onclick="genre();" class="lienGras">Homme</a></div>

et mon 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
$sSql="
			UPDATE
				matable
			SET
				genre= ?
			WHERE
				id_membre = ?
		";
		$oSth = $GLOBALS['BDD']->prepare($sSql);
		$oSth->execute(array($_GET['genre'], $_GET['id_membre']));
 
		switch($_GET['genre']){
 
			case 0 :
				// le membre est un homme
				echo '<a href="#" onclick="genre();" class="lienPetitNoir">homme</a>';
			break;
 
			case 1 :
				// le membre est une femme
				echo '<a href="#" onclick="genre();" class="lienGras">femme</a>';
			break;
		}

le php fnctionne, mais ce que je n'arrive pas a mettre en place c'est la liaison entre ces éléments, j'ai cherché un peu partout sur le forum, mais n'est pas trouvé d'explications.

Merci de votre aide

26/02/2010, 18h24
simotaqi
bonjour ,
pour faire , tu doit mettre un
Code:

1 2 document.getElementById('contenu_genre').innerHTML=xhr.responseText;
a la place de alert

ainsi, homme va etre changer selon la respose du code php

:ccool::ccool::ccool:
26/02/2010, 18h29
simotaqi
tu dois egalement specifier les variables $_GET['genre'] et $_GET['id_genre'] de ton code php

essaie plutot:
Code:

1 2 xhr.open("GET","ajax_membre_genre.inc.php?genre="+valeurgenre+"&id_genre="+valeurid,true);
a la place de xhr.open("GET","ajax_membre_genre.inc.php?",true);

car tu si tu travail avec la method get , tu dois passer les variable par ton url

Attention aussi à deux écueils assez courants :

Code:

<a href="#" onclick="genre();" class="lienGras">Homme</a></div>

Tu dois mettre un return false après l'appel de la fonction, sinon, le comportement normal du lien sera lancé, ce qui va provoquer un rechargement de la page et casser la requête :

Code:

<a href="#" onclick="genre();return false;" class="lienGras">Homme</a></div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 switch($_GET['genre']){ case 0 : // le membre est un homme echo '<a href="#" onclick="genre();" class="lienPetitNoir">homme</a>'; break; case 1 : // le membre est une femme echo '<a href="#" onclick="genre();" class="lienGras">femme</a>'; break; }
En faisant comme ça, lorsque tu intègreras le retour dans ta page, le code JavaScript (contenu de l'attribut onclick) ne sera pas évalué et donc pas fonctionnel.
Il faut donc renvoyer uniquement le contenu du lien (homme ou femme) et intégrer cela directement dans le lien existant, par exemple :

Code:

document.getElementById('contenu_genre').getElementsByTagName('a')[0].innerHTML=xhr.responseText;

voire en ajoutant un id à ton lien (la meilleure solution).

26/02/2010, 23h57
jexl

Merci pour toutes ces réponses que j'ai misent en place.
Bon c'est pas encore ca, mais plutôt que de vous demander d'ou le problème peut venir, j'aimerai essayer de trouver, c'est comme ca que ca rentre 8O
Mais autant en php, pas de soucis, mais en ajax, comment faites vous pour débuger ?
Sachant qu'au préalable j'ai testé le php qui marche sans soucis ?

Avez-vous des petites techniques qui me feront surement progresser ?

Merci encore.
28/02/2010, 17h36
andry.aime

Bonsoir,

Citation:

Mais autant en php, pas de soucis, mais en ajax, comment faites vous pour débuger ?

Installes Firebug sur ton firefox.
Montres nous ton nouveau code pour qu'on puisse t'aider.
09/03/2010, 21h24
jexl

Je viens de comprendre mon erreur, merci Firebug :zoubi:
En fait j'avais sécurisé ma page ajax.php avec une variable.

Du genre : dans ma page qui contient le javascript, je déclare une variable $ajax = TRUE ;

et dans mon ajax.php, je vérifie si cette variable est à TRUE, le truc c'est que comme c'est pas un include, la variable n'était pas reconnue. j'ai donc un resultat, pas encore celui que j'attends, mais je compte bien y arriver :mrgreen:

Ma question maintenant, c'est comment proteger mes pages ajax qui contiennent le php, car il suffit de l'appeler, et de lui passer les parametre attendus et surtout déclarés dans le js pour que le script s'execute... ?

un grand merci pour votre aide:ccool:
10/03/2010, 18h01
simotaqi

bon, est ce que tu peux préciser ta question, je ne sais pas qu'est ce que tu veux dire par "proteger tes pages ajax"??:koi:
10/03/2010, 19h04
jexl

Ok,
En fait quand j'appelle mes fonctions php via ajax, j'utilise cette requete :

Code:

xhr.open("GET","ajax_membre_genre.inc.php?genre="+valeurgenre+"&id_genre="+valeurid,true);

Ce qui signifie que si j'affiche le code de la page, je récupère l'url, et peux m'amuser à passer n'importe quoi dans l'url, et même charger un robot de se faire plaisir.

Ce que je voudrais, c'est être sure que celui qui appelle la page ajax_membre_genre.inc.php en a les droits.

Merci:mrgreen:
11/03/2010, 22h47
laurentg2003

Citation:

Tu dois mettre un return false après l'appel de la fonction, sinon, le comportement normal du lien sera lancé, ce qui va provoquer un rechargement de la page et casser la requête :

c'est obselete et ça ne fonctionne plus sur MSIE
12/03/2010, 09h51
E.Bzz

Bonjour,

Citation:

Envoyé par laurentg2003

c'est obselete et ça ne fonctionne plus sur MSIE

8O
Bien sûr que si.

D'où tiens-tu ça ? :koi:

A+
12/03/2010, 19h41
jexl

le return false marche très bien en effet.

Et concernant la sécurisation des pages ajax.php dont je parle plus haut, vous faites comment ?
15/03/2010, 13h39
simotaqi

moi , je travaille avec ajax mais j'ai jamais posé cette question;