Discussion :

[noobyyy]

Bonjour les gens

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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+

[noobyyy]

ah oui le id je suis bete ! mais donc dans le send je dois mettre tous les noms des id ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xhr.send(data);

j'ai du mal a comprendre data ?

EDIT:

en fouillant le forum j'ai trouvé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var data = "data="+document.getElementById('prenom').value;

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

[E.Bzz]

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

Ben, ceux que tu veux envoyer, oui

A+

[noobyyy]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 niveau syntaxique...

le data = les 3 input ?

ou chaque input = une variable ?

[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+

[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 ?

[E.Bzz]

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

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

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+

[noobyyy]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

nomparam1=valeurparam1&nomparam2=valeurparam2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[E.Bzz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[noobyyy]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[noobyyy]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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']).'")');
?>

[E.Bzz]

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

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

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+

[noobyyy]

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

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

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

[E.Bzz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

new ActiveXObject("Microsoft.XMLHTTP")

quelque part ?


Si

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[E.Bzz]

Si

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

[noobyyy]

Absent 3 jours je suis de retour...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?
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

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...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
}

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

oui, je n'ai pas actualisé mon code

JulienC sera pas moine ^^

[E.Bzz]

est-ce que "tabReponse[0]" dans test.php = echo 0; dans script.php ?
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

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

A+

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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