[AJAX] récup les champs d'un formulaire par la methode POST en AJAX

**joulive** · 13/07/2009, 16h25

Quelqu'un peut m'aider??
j'ai besoin de récupérer les valeurs des champs d'un formulaire par la méthode post en ajax.
Merci de me répondre vite c'est urgent.
Encore merci pour vos aides.

**JLC83** · 13/07/2009, 19h35

Bonjour,
Il évidemment possible de charger le contenu des champs sur le serveur.
Supposons un formulaire élémentaire :

Code xhtml :

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

1
2
3
4
5
6
7
8
 
<head>
<script type="text/javascript" src="jvScript1.js"></script>
</head>
<form method="POST">
<input type="text" id="nom" name="nom" />
<input name="button" id="button" type="button" value="clique moi" />
</form>

Le javascript :

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
 
(function(){
//lorsque le chargement est terminé appeler init
if(window.addEventListener) window.addEventListener("load", init, false);
else if (window.attachEvent) window.attachEvent("onload", init);
function init(){
var f = document.forms[0];
f.onsubmit = LeXMLHttpRequest;
}//fin de init()
function LeXMLHttpRequest(){
var contenu = encodeURIComponent(document.getElementById("nom"));
var  param = "nom="+contenu;
objetXJR = creationXJX();
objetXJR.open("post", "module.php", true);//la fonction php qui traite ton bazard
objetXJR.onreadystatechange = taFonction;//celle qui traitera les données renvoyées par le serveur
objetXJR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
objetXJR.send(parametres);
}
function creationXJX(){
var resultat = null;
try { //croisons les doigt
	resultat = new XMLHttpRequest();//Ouf un bon navigateur :-))
	}//Fin de try
	catch (Error){//IE ou pire :-(
	try {//IE6.0 et 7.0
		resultat = new ActiveXObject("Msxml2.XMLHTTP");//IE>5.0
		}//Fin de try
		catch (Error){//Ante IE6
		 try{//IE5.0 :-(
		 resultat = new ActiveXObject("Microsoft.XMLHTTP");//IE 5.0
		 }//Fin de try
		 catch (Error){//rine n'y fait :-{
		 	resultat = null;
		 }// Fin du dernier catch
		}//Fin du 2e catch
	}//Fin du 1e catch
return resultat;
}
})();

Je l'ai fait à l'arrachée.
A retenir :

Un objet qui gère les communications avec le serveur (function creationXJX())
le codage du contenu du champ encodeURIComponent
la fonction qui fait quelque chose de la réponse du serveur (taFonction)

a+
JL

**JLC83** · 15/07/2009, 16h26

Bonjour,
Au moins une erreur s'est glissée dans le code fourni.
En effet, l'évènement ne peut pas être onsubmit mais onclick... :

Code :

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

1
2
3
 
var f = document.forms[0];
f.onsubmit = LeXMLHttpRequest;//L'ERREUR

Devient donc :

Code :

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

1
2
3
 
var f = document.forms[0].button;
f.onclick = LeXMLHttpRequest;

Voilà.
a+

[AJAX] récup les champs d'un formulaire par la methode POST en AJAX

AJAX

Discussions similaires

Partager

Partager