[AJAX] Ajax / PHP Envoyer Et Récupérer

Version imprimable

Bonjour, voila je débute en ajax et j'aimerai savoir comment faire pour envoyer et récupérer une variable dans mes scripts...

J'ai ajouté un champ de texte, mais la variable je ne sais pas comment la faire passer. Enfin je n'y arrive pas ou bien a moitier car le fichier php n'en reçoit qu'une sur 2 ou en a 2 pour le prix d'une ...

Voici ma page de test en html

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
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
82
83
84
85
86
87
88
89
<!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" xml:lang="en" dir="ltr" lang="en">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
<title>Ajouter</title>   
 
<script language="JavaScript">   
 
 function createInstance()  
 {  
        var req = null;  
  if (window.XMLHttpRequest)  
  {  
    req = new XMLHttpRequest();  
  }   
  else if (window.ActiveXObject)   
  {  
   try {  
    req = new ActiveXObject("Msxml2.XMLHTTP");  
   } catch (e)  
   {  
    try {  
     req = new ActiveXObject("Microsoft.XMLHTTP");  
    } catch (e)   
    {  
     alert("XHR not created");  
    }  
   }  
         }  
        return req;  
 };  
 
 function storing(data)  
 {  
  var element = document.getElementById('storage');  
  element.innerHTML = data;  
 }  
 
 function submitForm(element)  
 {   
  var req =  createInstance();  
  var name = document.ajax.name.value;  
  var data = "name=" + name;  
 
  req.onreadystatechange = function()  
  {   
   if(req.readyState == 4)  
   {  
    if(req.status == 200)  
    {  
     storing(req.responseText);   
    }   
    else   
    {  
     alert("Error: returned status code " + req.status + " " + req.statusText);  
    }   
   }   
  };   
 
  req.open("POST", "post.php", true);   
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  req.send(data);  
 
 }   
 
</script>   
 
</head>   
 
 
<body>   
 
 
<FORM name="ajax" method="POST" action="">   
 <p>   
   <label>  
      <input name="name" type="text" value="name" size="60" /><br />  
      <input name="chemin" type="text" value="chemin" size="60" />   
   </label>   
</p>   
 <p>   
   <INPUT type="button" value="Ajouter"  ONCLICK="submitForm()">   
  </p>   
</FORM>   
 
<p>   <span id="storage"></span></p>   
 
</body>   
</html>

et ici ma page en php

Code:

1
2
3
4
5
6
7
8
 
<?php
$name = $_POST['name'];
$chemin = $_POST['chemin'];
echo $name;
echo "<p>";
echo $chemin;
?>

Merci d'avance ...

06/08/2010, 23h47
alpha232
Salut, je pense que tu ne sais recevoir qu'une seule variable de ton fichier php.
Une solution peut consister à transmettre une variable dans laquelle tu as toutes les valeurs, qui sont séparées par ex par un ; si tu veux les récupérer séparément (en utilisant la fonction split).
Alpha.
ex de code :
fichier php
Code:

1 2 3 4 5 6 <?php $name = $_POST['name']; $chemin = $_POST['chemin']; $var_str=$name.";".$chemin; echo $var_str ; ?>
Alpha.
07/08/2010, 00h01
acidjuice

Intéressant ! Merci =)
07/08/2010, 00h10
acidjuice
Je viens d'essayer mais pour moi ca n'a pas marché ...
sur le code ajax j'ai ajouter cette ligne

Code:

var chemin = document.ajax.chemin.value;

et j'ai modifier celle ci

Code:

var data = "name=" + name;

en celle ci

Code:

var data = "name=" + name + ";chemin=" + chemin;

et sur le code php j'ai utiliser ce que tu m'a donné
Code:

1 2 3 4 5 6 7 <?php $name = $_POST['name']; $chemin = $_POST['chemin']; $var_str= split($name,";"); echo $name; echo $var_str ; ?>
Mais j'ai toujour une variable non définie ...
07/08/2010, 02h36
alpha232
Salut,
D'abord name est un mot reservé de js, je te conseille d'utiliser autre chose.
par ex: nom
Tu aurais donc un champ nom (au lieu de name) et un champ chemin.

pour récupérer le contenu de tes champs en js :
Code:

1 2 var nom = document.getElementById('nom'); var chemin = document.getElementById('chemin');
pour le code js, pour transmettre plusieurs paramètres à ton fichier php, tu dois respecter le formalisme

Code:

post.php?nom=ee&chemin=22

c-a-d que tes paramètres doivent être séparés par &
Si on reprend ton code:

Code:

var data = "name=" + name + ";chemin=" + chemin;

on le transforme un peu et on fait

Code:

var data = "nom=" + nom + "&chemin=" + chemin;

Comme ça tes 2 paramètres sont envoyés à la soumission du formulaire.

Ensuite, coté php on reprend
Code:

1 2 3 4 5 6 <?php $nom = $_POST['nom']; $chemin = $_POST['chemin']; $var_str=$name.";".$chemin; echo $var_str ; ?>
Ici, on stocke , séparés par un ; les valeurs des 2 champs, dans la variable $var_str que l'on va récupérer ds le req.response text.

Dans ton code ajax, tu récupères les valeurs et tu en fais ce que tu veux
Soit tu laisses comme ça

Code:

storing(req.responseText);

et tu va mettre ds le innerHtml la valeurs de tes champs séparés par un point-virgule, soit tu fais un split sur le req.responseText et tu récupères tes 2 valeurs séparément.

Alpha.;)
07/08/2010, 12h19
acidjuice
J'ai suivi ton idée .. Cependant j'ai du procéder autrement ...

Quand tu récupère les variable des "input text" par id
Code:

1 2 var nom = document.getElementById('nom'); var chemin = document.getElementById('chemin');
Moi j'ai essayer par nom et bizarrement ca à marché
Code:

1 2 3 var nom = document.ajax.nom.value; var chemin = document.ajax.chemin.value;
Tu avait raison à propos de la transmission sur la page php, c'était juste une histoire de "&"
Code:

1 2 var data = "nom=" + nom + "&chemin=" + chemin;
Et c'est vrai que ça marche mieux en changeant le "name" en "nom" .

Encore merci beaucoup ;)
08/08/2010, 10h35
llaffont

Pour les retours PHP de simple variable.

Je vous conseil d'employer des structures le JSON ou le XML.

Les splits de retour PHP c'est assez moche :aie:
08/08/2010, 12h31
alpha232

Je ne connais pas trop json, pourriez-vous nous donner un exemple?
merci.
alpha.
08/08/2010, 23h11
llaffont

le JSON selon WIKIPedia

Le JSON dans les FAQ

Et puis je rajoute même un valideur de JSON pour tes premiers essais ICI

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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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" xml:lang="en" dir="ltr" lang="en">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
<title>Ajouter</title>   
 
<script language="JavaScript">   
 
 function createInstance()  
 {  
        var req = null;  
  if (window.XMLHttpRequest)  
  {  
    req = new XMLHttpRequest();  
  }   
  else if (window.ActiveXObject)   
  {  
   try {  
    req = new ActiveXObject("Msxml2.XMLHTTP");  
   } catch (e)  
   {  
    try {  
     req = new ActiveXObject("Microsoft.XMLHTTP");  
    } catch (e)   
    {  
     alert("XHR not created");  
    }  
   }  
         }  
        return req;  
 };  
 
 function storing(data)  
 {  
  var element = document.getElementById('storage');  
  element.innerHTML = data;  
 }  
 
 function submitForm(element)  
 {   
  var req =  createInstance();  
  var nom = document.ajax.nom.value;
        var prenom = document.ajax.prenom.value;
        var civilite = document.ajax.civilite.value;
        var pays = document.ajax.pays.value;
        var pseudonyme = document.ajax.pseudonyme.value;
        var jour = document.ajax.jour.value;
        var mois = document.ajax.mois.value;
        var annee = document.ajax.annee.value;
        var presentation = document.ajax.presentation.value;
        var mot_de_passe = document.ajax.mot_de_passe.value;
        var email = document.ajax.email.value;
        var data = "nom=" + nom + "&prenom=" + prenom + "&civilite=" + civilite + "&pseudonyme=" + pseudonyme + "&jour=" + jour + "&mois=" + mois + "&annee=" + annee + "&presentation=" + presentation + "&mot_de_passe=" + mot_de_passe + "&email=" + email + "&pays=" + pays;
 
  req.onreadystatechange = function()  
  {   
   if(req.readyState == 4)  
   {  
    if(req.status == 200)  
    {  
     storing(req.responseText);   
    }   
    else   
    {  
     alert("Error: returned status code " + req.status + " " + req.statusText);  
    }   
   }   
  };   
 
  req.open("POST", "post.php", true);   
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
  req.send(data);  
 
 }   
 
</script>   
 
</head>   
 
 
<body>   
 
 
<FORM name="ajax" method="POST" action="">   
 <p>   
   <label>  
      <input name="name" type="text" value="name" size="60" /><br />  
      <input name="chemin" type="text" value="chemin" size="60" />   
   </label>   
</p>   
 <p>   
   <INPUT type="button" value="Ajouter"  ONCLICK="submitForm()">   
  </p>   
</FORM>   
 
<p>   <span id="storage"></span></p>   
 
</body>   
</html>

toutes les valeurs des champs de ton formulaire seront stocker dans la variable data
pour la récupération de tes données sur page post.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$myarray = &$_POST;
$civilite=$myarray["civilite"];
$cacher=$myarray["cacher"];
echo $cacher;
$pays=$myarray["pays"];
$nom=$myarray["nom"];
$prenom=$myarray["prenom"];
$pseudonyme=$myarray["pseudonyme"];
$jour=$myarray["jour"];
$mois=$myarray["mois"];
$annee=$myarray["annee"];
$presentation=$myarray["presentation"];
$mot_de_passe=$myarray["mot_de_passe"];
$email=$myarray["email"];
$date_naissance=$annee;  
$date_naissance.="-";
$date_naissance.=$mois;  
$date_naissance.="-";
$date_naissance.=$jour;