[AJAX] Ajax (formulaire)

**redspiegel** · 28/05/2008, 08h53

Lut,
J'ai un petit probleme en ce qui concerne les formulaires et l'Ajax. Faut dire que je débute en Ajax et que le javaScript m'est pratiquement inconnu. C'est d'ailleurs pour ca que j'ai lu quelques bouquins sur les sujets suscités.
Donc pour en revenir au probleme, je me retrouve (comme dans de nombreux exemples) avec 3 pages:
-1 page .html qui contient un "formulaire" (si on peut l'appeler comme ca étant donné qu'il ne comporte pour l'instant qu'un champs),
-1 page .php qui recoit l'information passée par le formulaire ($_POST = ....)
-1 page .js qui traite la page .php et qui doit m'afficher le résultat de la page .php (si j'ai bien compris le concept de l'Ajax).
A l'issue du traitement par la page .js, je devrais me retrouver avec ma page .html qui contient mon formulaire et un <div> pour récupérer l'information sortie de la page .js et donc le contenu du input initialement envoyé.
Et voila que je n'ai rien. Le pire c'est que je mets des echo avant et apres traitement et ces echos sont affichés

Donc pour résumer, 3 pages (classiques), un envoi de formulaire vers un .php
.js traite .php mais ne sort pas le contenu de l'input initial.
Une idée ????
.html

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
 
<html>
<head>
<title>Test </title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p>
	<div id="mess">Test Formulaire</div>
	<form  method ="post" action = "" id="form" onsubmit="ajax(this.nom.value,'test.php','vu');return false;"  >
	Nom Utilisateur : <input type="text" id="nom" name="nom"/>
	<input type="submit" id="sub" name="sub_form" value='Go'  />
	</form>
	<div id="vu"></div>
</p>
 
</body>
</html>

.php

Code :

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

1
2
3
4
5
6
7
 
<?php
echo 'avant';
$nom = $_POST['nom'];
echo 'votre nom est : '.$nom;
echo 'apres';
?>

.js

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
 
function ajax(nom,serverPage,objID)
{
	var xmlhttp = false;
			try{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				alert("Vous utilisez IE.");
				}catch(e)
					{
						try
						{
							xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
							alert("Vous utilisez IE.");
						}
						catch(e)
						{
							xmlhttp = false;
						}
					}
					if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
					{
						xmlhttp = new XMLHttpRequest(); 
					}
			alert('c parti !! ');	
			var obj = document.getElementById(objID);	
			xmlhttp.open("GET",serverPage,true);
			xmlhttp.onreadystatechange = function()
			{
 
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
				{
					 alert("vous etes la");
					 var data = xmlhttp.responseText;
					 obj.innerHTML = data;
				}
			}	
alert('vous etes ici');
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(nom);       
}

Voila merci pour vos réponses. Sachez que je fais des tests en vu de traiter ma première partie de projet de maniere plus dynamique. Je fais ces tests (basiques) et lis des tutos/livres pour me permettre de réaliser cette deuxième partie de projet et pour comprendre ces mécanismes.
++

**E.Bzz** · 28/05/2008, 09h28

Bonjour,
juste un problème de syntaxe on dirait :

Code :

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

onsubmit="ajax(this.form.elements['nom'].value,'test.php','vu');

EDIT : par contre il faudrait aussi envoyer les données en POST :

Code :

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

xmlhttp.open("GET",serverPage,true);

A+

**redspiegel** · 28/05/2008, 09h49

Envoyé par E.Bzz

Bonjour,
juste un problème de syntaxe on dirait :

Code :

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

onsubmit="ajax(this.form.elements['nom'].value,'test.php','vu');

Apparemment, ça ne fonctionne plus, plus rien. Même avec firebug, lorsque je debug je ne rentre même pas dans le .js

Envoyé par E.Bzz

EDIT : par contre il faudrait aussi envoyer les données en POST :

Code :

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

xmlhttp.open("GET",serverPage,true);

A+

Oui c'est vrai, j'ai changé de nombreuses fois la méthode mais la c'est bon....

Comment feriez vous pour faire quelque chose d'aussi simple?C'est quand meme incroyable qu'un truc comme ca ne puisse pas fonctionner

J'ai juste besoin de balancer mes post dans mon .php et pis c'est tout ...
Merci encore pour ta réponse

**E.Bzz** · 28/05/2008, 09h59

Une autre erreur : obj doit être défini dans la fonction onreadystatechange et non avant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
			var obj = document.getElementById(objID);	
			xmlhttp.open("GET",serverPage,true);
			xmlhttp.onreadystatechange = function()
			{
				
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
				{
					 alert("vous etes la");
					 var data = xmlhttp.responseText;
					 obj.innerHTML = data;
				}

Il n'y avait pas qu'un problème de syntaxe

A+

**redspiegel** · 28/05/2008, 10h14

Malheureusement ça ne fonctionne pas non plus, le <div> de destination est toujours connu (sous firebug obj prends la valeur de mon <div>) mais je n'est toujours pas d'affichage de mon paramètre passé a la page .php ( a savoir "nom") ...
Peut être une autre technique ??
Je retourne a la recherche d'info, merci quand même

[EDIT]
Apparement le probleme se trouve dans la partie responseText, voila ce que firebug affiche :
data = xmlhttp.responseText;
avec data = "avant traitement<br/>votre nom est : <br/>apres traitement"
--> donc pas d'info sur le $_POST de la page .php
[/EDIT]