Passage de variables avec Ajax qui ne fonctionne pas

**absot** · 10/12/2010, 11h03

Bonjour, je suis en train de créer un formulaire avec Jquery où on remplie notre formulaire en première page, l'utilisateur le valide puis vient des traitements qui sont affichés sur un deuxième slide, tout fonctionne sauf le passage des variables.

Je m'explique, quand je dis que tout fonctionne, c'est à dire que ma page s'execute mais que là où je demande de m'afficher la valeur de ma variable récupérer qui est "nom", rien ne s'affiche et je voudrais savoir pourquoi.

Voici mon de code
form.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
57
58
59
60
61
62
63
64
65
66
67
68
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml]">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Test slide Jquery</title>  
<link rel="stylesheet" href="style.css" media="all" />  
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js]"></script>  
<script type="text/javascript">  
 
function go() 
{ 
 if (window.XMLHttpRequest) 
 {// code for IE7+, Firefox, Chrome, Opera, Safari 
  http=new XMLHttpRequest(); 
 } 
 else 
 {// code for IE6, IE5 
    http=new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
 
 var nom = document.getElementById("nom").value; 
 var datas = "nom="+nom; 
 
 http.open("GET","exemple.php",true); 
 http.send(datas); 
 
 http.onreadystatechange=function() 
 { 
  if (http.readyState==4 && http.status==200) 
     { 
      document.getElementById("slide2").innerHTML=http.responseText; 
     } 
 } 
} 
 
</script>  
 
<html>  
<body>  
 
<div id="slideshow">  
 
  <div id="slidesContainer">  
 
    <div class="slide" id="slide1">  
     Slide 1  
     <table border="1">  
      <tr>  
       <th>Nom : </th>  
       <td><input type="text" id="nom"></input></td>  
      </tr>  
      <tr>  
       <th>Prenom : </th>  
       <td><input type="text" id="prenom"></input></td>  
      </tr>  
     </table>   
     <button type="button" onclick="go()">Cliques-moi</button>  
    </div>  
 
    <div class="slide" id="slide2">  
      Slide 2<br/>  
    </div>  
 
  </div>  
</div>  
</body>  
</html>

traitement.php

Code :

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

1
2
3
4
 
<?php   
echo $_GET["nom"];  
?>

Qu'est-ce que je dois corriger svp?

Faut-il mieux envoyer cela par POST ou GET?

**Bovino** · 10/12/2010, 11h12

*

Code :

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

<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js]"></script>

C'est quoi ces crochets ???

* Du reste, pourquoi vouloir charger jQuery vu que tu ne l'utilises pas ?

*

Code html :

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

<input type="text" id="prenom"></input>

input est une balise auto fermante

*

Code :

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

1
2
http.open("GET","exemple.php",true); 
http.send(datas);

Si tu fais du GET, les paramètres doivent être passés dans l'URL...

**absot** · 10/12/2010, 11h36

Je n'utilise pas tout de suite Jquery pour ne pas m'embêter à savoir d'où vient le problème comme ça je sais que ça ne vient pas de là mais par la suite, je vais l'utiliser pour faire quelque chose qui ressemble à ça mais avec un formulaire.

Pour les crochets, je les ai trouvés dans le code source à télécharger de ce tutoriel.

Dans ce cas, je vais faire du POST vu que tout se fera sur la même page sans rafraîchissement (remplissage du formulaire + traitement du formulaire et affichage sur la même page mais sur un autre slide d'où le Jquery).

Ca y est, après de durs efforts, ça fonctionne!!

Je mets mon nouveau script comme il est actuellement (avec la récupération du nom et son affichage dans le deuxième slide pour ceux que ça intéresse et si jamais il y a des recommandations.

formulaire.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test slide Jquery</title>
<link rel="stylesheet" href="style.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 
function go()
{
	// Création de l'objet XMLHttpRequest
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		http=new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{// code for IE6, IE5
  		http=new ActiveXObject("Microsoft.XMLHTTP");
  	}else
  	{
		alert("votre naviguateur ne supporte pas les objets XMLHttpRequest..");
		return ;
  	}
 
	var datas = null;
	var nom = null;
 
	// Récupération des éléments du formulaires
	nom = document.getElementById("nom").value;
	datas = "nom="+nom;
 
	// Envoi des données
	http.open("POST","traitement.php",true);
 
	// Récupération du formulaire de comparaison et MAJ de la page
	http.onreadystatechange=function()
	{
		if (http.readyState==4 && http.status==200)
    	{
    		document.getElementById("slide2").innerHTML=http.responseText;
    	}
	}
 
	http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	http.send(datas);
}
 
</script>
 
<html>
<body>
 
<div id="slideshow">
 
  <div id="slidesContainer">
 
    <div class="slide" id="slide1">
    	Slide 1
    	<table border="1">
    		<tr>
    			<th>Nom : </th>
    			<td><input type="text" id="nom"/></td>
    		</tr>
    		<tr>
    			<th>Prenom : </th>
    			<td><input type="text" id="prenom"/></td>
    		</tr>
    	</table>	
    	<button type="button" onclick="go()">Cliques-moi</button>
    </div>
 
    <div class="slide" id="slide2">
      Slide 2<br/>
    </div>
 
  </div>
</div>
</body>
</html>

traitement.php

Code :

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

1
2
3
4
5
6
7
 
<?php
foreach ($_POST as $value)
{
        echo utf8_decode($value);
}
?>

J'ai une dernière question, le formulaire actuel n'est pas le vrai, ce n'était que pour des tests, le vrai formulaire sera plus complexe, c'est à dire par exemple que si l'utilisateur coche certains boutons radio, un nouveau menu apparaît donc au moment de la validation, il n'y aura pas le même nombre de variables suivant ce que l'utilisateur coche et du coup il n'y a pas d'autres moyens que de tester par exemple si tel bouton est coché, alors il y a cette variable?

**Bovino** · 10/12/2010, 11h44

Pour les crochets, je les ai trouvés dans le code source à télécharger

Si tu regardes le code source de la page d'exemple, ils n'y sont pas ! Ils ont été mis dans l'archive pour indiquer que tu peux les modifier en fonction de tes besoins.

Dans ce cas, je vais faire du POST vu que tout se fera sur la même page sans rafraîchissement

Aucun rapport... que ce soit en GET ou en POST, la requête AJAX se fera sans rechargement de la page...

Mis à part cela, il faudrait que je change quoi dans mon script?

Ben commence déjà par tout ce que je t'ai indiqué