[AJAX] formulaire + ajax

Version imprimable

29/01/2010, 13h57
noobyyy

[AJAX] formulaire + ajax
Bonjour les gens :ccool:

je débute avec l'ajax depuis peu, j'ai lu de nombreux cours j'ai compris le système cependant j'ai du mal à mettre ceci en application.

J'ai un formulaire avec 3 input j'aimerai cliquer sur une image (onclick ou submit) et mettre à jour dans la base de données les champs du input.

Ma question est toute bête mais je ne comprends pas comment je peux envoyer mes champs du type post avec leurs valeurs.
Code:

1 2 3 4 xhr.open("POST", "script.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data);
est-ce que data suffit pour envoyer tous les input ? ou faut-il les déclarer ?
Code:

1 2 3 <input type="text" name="email" /> <input type="text" name="nom" /> <input type="text" name="prenom" />
dans script.php je les récupère avec $_POST['name'];

si la requête fonctionne comment je peux mettre à jour les champs ? biensur sans recharger la page. Ceci sa fera avec le javascript ou php ?

si vous avez un bon site qui traite des exemples de POST, je veux bien les lire.

Merci pour vos conseils.
29/01/2010, 14h05
E.Bzz

Bonjour,
il te suffit de récupérer les valeurs à envoyer (avec des id ça serait préférable), puis d'envoyer la liste des paramètre via l'instruction send().

Tu trouveras pas mal d'exemples sur ce forum ;)

A+
29/01/2010, 14h08
noobyyy
ah oui le id je suis bete ! mais donc dans le send je dois mettre tous les noms des id ?

Code:

xhr.send(data);

j'ai du mal a comprendre data ?

EDIT:

en fouillant le forum j'ai trouvé:
Code:

1 2 3 4 5 xhr.open("POST","script",true); var data = "data="+document.getElementById('prenom').value; xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(data);
Code:

1 2 var data = "data="+document.getElementById('prenom').value;
je dois déclarer tous les input pour l'envoie ?
29/01/2010, 14h14
E.Bzz

Citation:

Envoyé par noobyyy

je dois déclarer tous les input pour l'envoie ?

Ben, ceux que tu veux envoyer, oui :mrgreen:

A+
29/01/2010, 14h18
noobyyy
Code:

1 2 var data = "data="+document.getElementById('prenom').value;
ok, mais je ne vois pas comment je peux faire pour en déclarer plusieurs en faites 8O niveau syntaxique...

le data = les 3 input ?

ou chaque input = une variable ?
29/01/2010, 14h39
E.Bzz

Heu ... là y avait qu'un paramètre à passer. Toi tu en as plusieurs.

Quand on fait des copier/coller à partir d'autres scripts, en général, y a 2 ou 3 adaptations à faire ;)

Encore une fois, plein d'exemples sur le forum ...

A+
29/01/2010, 14h44
noobyyy

euh, je le sais bien ! mais tu ne m'indiques pas ce que je dois faire. j'ai bien compris que je dois déclarer mes 3 id du input mais je fais comment ?
29/01/2010, 14h52
E.Bzz

Citation:

Envoyé par noobyyy

mais tu ne m'indiques pas ce que je dois faire.

Si je t'ai indiqué de chercher dans le forum :calim2:

Tu y aurais trouvé ça, par exemple (cf. 1° post)

Sinon, il y a les sources/tutos où tu aurais trouvé celui-là (toujours par exemple, car il y en a d'autres), et en lisant le tableau du § "III. Utilisation" tu aurais aussi trouvé la réponse ...

Bref ...

A+
29/01/2010, 17h51
noobyyy
Code:

nomparam1=valeurparam1&nomparam2=valeurparam2
Code:

1 2 3 4 xhr.open("POST","script.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(prenom=valeur1&nom=valeur2);
prenom = ID du input
valeur1 = $_POST['valeur1'] dans script.php ?

c'est bien comme ceci ?
29/01/2010, 18h02
E.Bzz

Presque : ça doit être une chaîne de caractère

Code:

xhr.send("prenom=valeur1&nom=valeur2");

Teste et tu verras ce que tu récupères côté PHP (après quelques instants de réflexion ;) )

A+

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 xhr.open("POST","script.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //----------- prenom = document.getElementById('prenom').value; nom= document.getElementById('nom').value; email= document.getElementById('email').value; sex= document.getElementById('sexe'); sexe = sex.options[sex.selectedIndex].value; //----------- xhr.send("test_prenom="+prenom&"test_nom="+nom&"test_email="+email&"test_sexe="+sexe);
dans script.php je fais mon update classique et c'est tout ? OK!

est-ce que mon code est bon cette fois ? OK!

pour protéger les données je m'en occupe uniquement dans la page script.php ?

Si je fais des tests sur un champ et je remarque une erreur comment je le fais savoir à l'utilisateur ? (page script.php)

---
EDIT: c'est bon j'ai réussi à inséré dans la base de données les données.

---
EDIT2: Tout marche sur FIREFOX et CHROME, biensur sous IE ça ne fonctionne pas que faire ?

Voici une page test, on rentre un prénom, sa l'ajoute dans la base de données pendant ce temps ceci affiche un loader puis une fois terminé il part et affiche une image qui va rester 5secondes. Tout fonctionne sous firefox et chrome sauf sous IE. J'aimerai de l'aide pour contrôler les erreurs éventuels de la base de données ou autre si je fais des tests.

exemple:
si la base de données n'est pas disponible ?
si le prénom contient des caractères invalide ?
si tout simplement je veux provoquer une erreur ?

index.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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>TEST</title>
		<meta name="description" content="Descriptions..." />
		<meta name="Keywords" content="Mots, clefs" />
		<script type="text/javascript" src="oXHR.js"></script>
		<script type="text/javascript">		
 
 
function test()
{
	var xhr   = getXMLHttpRequest();	
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {	
			xhr.responseText;
			document.getElementById("loader").style.display = "none";
			document.getElementById("maj1").style.display = "inline";
			setTimeout("move()",5000);
		} else if (xhr.readyState < 4) {
			document.getElementById("loader").style.display = "inline";
		}
	};	
 
	xhr.open("POST","script.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	//-----------
	prenom = document.getElementById('prenom').value;
	//-----------
	xhr.send("test_prenom="+prenom);
	document.getElementById('prenom').value = "";	
}
 
function move()
{
	document.getElementById("maj1").style.display = "none";
}
 
function erreur()
{
	document.getElementById("maj2").style.display = "inline";
}
</script> 
</head>
<body>
<input type="text" id="prenom" />&nbsp;<span id="loader" style="display:none;"><img src="../../img/loading2.gif" alt="loading" /></span>
<br /><br />
<a href="javascript:test();" title="" />envoyer</a>
<span id="maj1" style="display:none;"><img src="../../img/edit_yes.png" alt="loading" /></span>
<span id="maj2" style="display:none;"><img src="../../img/edit_no.png" alt="loading" /></span>
</body>
</html>

script.php

Code:

1
2
3
4
5
6
7
8
 
<?php
// connexion
 
$connect = mysql_connect(MYHOST, MYUSER, MYPASS)  or die ('Identifiants incorrects');  
mysql_select_db(MYDB) or die ('Base de données incorrecte');  
mysql_query('INSERT INTO prenom VALUES(NULL, "'.mysql_real_escape_string($_POST['test_prenom']).'")');
?>

01/02/2010, 14h27
E.Bzz

Citation:

Envoyé par noobyyy

Tout fonctionne sous firefox et chrome sauf sous IE.

Il suffit de nommer tes variables différemment, je pense. Là elles correspondent à l'id de l'objet sur lequel tu les fais pointer. Or une ancestrale syntaxe iE permet de faire ainsi référence à un objet directement via son id. Du cou, il s'embrouille :aie:

Citation:

Envoyé par noobyyy

J'aimerai de l'aide pour contrôler les erreurs éventuels de la base de données ou autre si je fais des tests.

exemple:
si la base de données n'est pas disponible ?
si le prénom contient des caractères invalide ?
si tout simplement je veux provoquer une erreur ?

Tu n'as qu'à te définir un format de réponse.
Par exemple, tu renvoies

Citation:

OK=une_valeur;message

Si pas d'erreur, tu renvoies "OK=1", le "message" qui suit peut contenir le résultat de la mise à jour.
Si "OK" est différent de 1, c'est qu'il y eu une erreur dont le texte est dans "message", et il suffit de l'afficher à l'utilisateur ...

A+
01/02/2010, 23h09
noobyyy

Citation:

Envoyé par E.Bzz

Il suffit de nommer tes variables différemment, je pense. Là elles correspondent à l'id de l'objet sur lequel tu les fais pointer. Or une ancestrale syntaxe iE permet de faire ainsi référence à un objet directement via son id. Du cou, il s'embrouille :aie:

Après quelques recherche il semblerai que IE8 serai instable à getElementById est-ce vrai ? Donc je n'utilise pas les mêmes noms ok !

Citation:

Envoyé par E.Bzz

Tu n'as qu'à te définir un format de réponse.
Par exemple, tu renvoies
Si pas d'erreur, tu renvoies "OK=1", le "message" qui suit peut contenir le résultat de la mise à jour.
Si "OK" est différent de 1, c'est qu'il y eu une erreur dont le texte est dans "message", et il suffit de l'afficher à l'utilisateur ...

Pour renvoyer une réponse je fais dans script.php

si ok alors echo 1 sinon 0
et comment je fais pour le récupérer ?
excuse moi mais tu peux me faire un exemple de variable qui se trouve dans script.php et que je récupère ?

je te remercie E.Bzz de ton aide, il y a que toi qui s'occupe de moi lol :ccool:

Citation:

Envoyé par noobyyy

Après quelques recherche il semblerai que IE8 serai instable à getElementById est-ce vrai ?

Pas sûr que je me sois fais comprendre.
Dans ce cas là :

Code:

prenom = document.getElementById('prenom').value;

ce n'est pas de la partie droite dont je parlais, mais de la partie gauche.
Je te conseillais de modifier par exemple en

Code:

le_prenom = document.getElementById('prenom').value;

pour que le nom de la variable soit différent de l'id ...

Citation:

Envoyé par noobyyy

si ok alors echo 1 sinon 0
et comment je fais pour le récupérer ?

D'Ajax, tu récupères une chaîne de caractères.
Tu peux facilement récupérer chacun de ses élément dans un tableau.
Si ton xhr.responseText contient par exemple "ok=0;message erreur"
Code:

1 2 3 4 5 6 7 var tabReponse = xhr.responseText.split(";"); alert(tabReponse[0]); // Contient "ok=0" alert(tabReponse[1]); // Contient "message erreur" if (tabReponse[0].split("=")[1] == "0") // Contient le code retour, ici "0" alert(tabReponse[1]); // Affiche le message else alert("Tout est OK !");
A+

03/02/2010, 16h28
JulienC

Bonjour,

Quelle erreur IE te fait ?
Est-ce que oXHR.js est bien prévu pour IE ? (je pense à getXMLHttpRequest(), est-ce qu'il fait bien un

Code:

new ActiveXObject("Microsoft.XMLHTTP")

quelque part ?

Si

Code:

xhr.send("test_prenom="+prenom&"test...

marche sous Firefox ou Chrome, je me fais moine ! la bonne syntaxe étant :

Code:

xhr.send("test_prenom="+prenom+"&test...

Surtout, comme pour tout paramètre d'URL, n'oublie pas d'utiliser la fonction JS encodeURIComponent, pour tout tes paramètres.
03/02/2010, 16h44
E.Bzz

Citation:

Envoyé par JulienC

Si

Code:

xhr.send("test_prenom="+prenom&"test...

marche sous Firefox ou Chrome, je me fais moine !

Vu les EDIT, on peut supposer que ce n'était pas la version finale ;)

A+

Absent 3 jours je suis de retour... :zoubi:

Citation:

Envoyé par E.Bzz

Code:

le_prenom = document.getElementById('prenom').value;

pour que le nom de la variable soit différent de l'id ...

Merci maintenant mon script fonctionne sous IE ! :mrgreen:
Citation:
Envoyé par E.Bzz
D'Ajax, tu récupères une chaîne de caractères.
Tu peux facilement récupérer chacun de ses élément dans un tableau.
Si ton xhr.responseText contient par exemple "ok=0;message erreur"
Code:

1 2 3 4 5 6 7 var tabReponse = xhr.responseText.split(";"); alert(tabReponse[0]); // Contient "ok=0" alert(tabReponse[1]); // Contient "message erreur" if (tabReponse[0].split("=")[1] == "0") // Contient le code retour, ici "0" alert(tabReponse[1]); // Affiche le message else alert("Tout est OK !");
est-ce que "tabReponse[0]" dans test.php = echo 0; dans script.php ? 8O
car ton code supprime le caractère ";" et plus tard le caractère "="
dans ton exemple "tabReponse[0]" = $ok=0; ?
je ne sais plus lol :calim2:

Citation:

Envoyé par JulienC

Est-ce que oXHR.js est bien prévu pour IE ? (je pense à getXMLHttpRequest(), est-ce qu'il fait bien un

je pense que sur ce point la je n'ai pas de soucis, voici un extrait de mon fichier... :lol:
Code:

1 2 3 4 5 6 7 if (window.ActiveXObject) { // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
Citation:

Envoyé par E.Bzz

Vu les EDIT, on peut supposer que ce n'était pas la version finale

oui, je n'ai pas actualisé mon code :mouarf:

JulienC sera pas moine ^^

05/02/2010, 10h20
E.Bzz

Citation:

Envoyé par noobyyy

est-ce que "tabReponse[0]" dans test.php = echo 0; dans script.php ? 8O
car ton code supprime le caractère ";" et plus tard le caractère "="
dans ton exemple "tabReponse[0]" = $ok=0; ?
je ne sais plus lol :calim2:

Ben regarde les commentaires dans mon code : c'est détaillé étape par étape ...
Sinon, tu peux aussi tester ;)

La méthode split() est bien pratique :mouarf:

A+
05/02/2010, 11h02
noobyyy
D'accord j'ai mieux compris le fonction split().
Mais alors je ne comprends pas d'où vient la chaine que l'on va travailler.

dans script.php

exemple:

si $_POST['test_prenom'] respecte bien un regex alors
je fais la requete.
// requete
echo 1;

sinon
echo 0;

dans index.php
Code:

1 2 alert(tabReponse[0]); // Contient "0" et non "ok=0" alert(tabReponse[1]); // Contient undefined et non "message erreur"
excuse moi j'ai du mal à comprendre :(
05/02/2010, 11h13
E.Bzz

Citation:

Envoyé par noobyyy

excuse moi j'ai du mal à comprendre :(

Tu as juste oublié le postulat de départ, visiblement ;)

Citation:

Envoyé par E.Bzz

Si ton xhr.responseText contient par exemple "ok=0;message erreur"

Je te proposais simplement une méthode pour répondre aux questions que tu posais

Citation:

si la requête fonctionne comment je peux mettre à jour les champs ? biensur sans recharger la page. Ceci sa fera avec le javascript ou php ?

Citation:

J'aimerai de l'aide pour contrôler les erreurs éventuels de la base de données ou autre si je fais des tests.

exemple:
si la base de données n'est pas disponible ?
si le prénom contient des caractères invalide ?
si tout simplement je veux provoquer une erreur ?

Or ces fonctionnalités nécessitent un peu plus d'info en retour de la requête qu'un simple OK/KO. Je te proposais donc de modifier la réponse que tu génères sur le serveur.

Aussi, le principe général est : si pas d'erreur, tu renvoie "ok=1" + l'information permettant de mettre à jour ta page sans la recharger
si erreur, tu renvoies "ok=0" + l'information permettant de signaler l'erreur ainsi que son type (tu l'auras facilement puisque le message est généré sur le serveur) afin de l'afficher pour l'utilisateur.
Tout y est déjà (sauf la partie serveur), je te laisse relire ;)

A+
05/02/2010, 12h57
noobyyy
donc si je comprends bien dans script.php je ne fais pas de

Code:

echo 0;

mais plutôt
Code:

1 2 echo "ok=0;prénom invalide";
c'est bien ça ?
05/02/2010, 14h08
E.Bzz

Citation:

Envoyé par noobyyy

c'est bien ça ?

Oui, par exemple.

Si ce format correspond à ce que tu veux faire. Ce n'était qu'un exemple ;)

A+
05/02/2010, 18h46
noobyyy

OK, en tout cas je te remercie beaucoup pour ton aide et de ta patience j'ai bien compris le fonctionnement de tout ça !

@ bientôt sur un autre topic :mouarf: