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

**acidjuice** · 06/08/2010, 23h01

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 :

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

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

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

Merci d'avance ...

**alpha232** · 06/08/2010, 23h47

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 :

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

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

Alpha.

**acidjuice** · 07/08/2010, 00h01

Intéressant ! Merci =)

**acidjuice** · 07/08/2010, 00h10

Je viens d'essayer mais pour moi ca n'a pas marché ...
sur le code ajax j'ai ajouter cette ligne

Code :

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

var chemin = document.ajax.chemin.value;

et j'ai modifier celle ci

Code :

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

var data = "name=" + name;

en celle ci

Code :

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

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

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

Code :

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

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

**alpha232** · 07/08/2010, 02h36

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 :

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

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 :

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

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 :

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

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

on le transforme un peu et on fait

Code :

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

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 :

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

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 :

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

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.

**acidjuice** · 07/08/2010, 12h19

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 :

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

1
2
var nom = document.getElementById('nom');
var chemin = document.getElementById('chemin');

Moi j'ai essayer par nom et bizarrement ca à marché

Code :

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

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 :

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

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

**llaffont** · 08/08/2010, 10h35

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

**alpha232** · 08/08/2010, 12h31

Je ne connais pas trop json, pourriez-vous nous donner un exemple?
merci.
alpha.

**llaffont** · 08/08/2010, 23h11

le JSON selon WIKIPedia

Le JSON dans les FAQ

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

**jerrypatrick2007** · 23/09/2010, 13h53

Code html :

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

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
$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;

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

AJAX

Discussions similaires

Partager

Partager