[AJAX] passage variable coté vers coté serveur via ajax

**sooprano** · 09/04/2009, 15h37

salut mon probleme c'est que j'ai un formulaire avec deux champs(nom, mail) nommé inscription et j'ai ecriture.php qui contient l'ajout dans la table
j'ai integrer l'intermidiere ajax pour que la page ne se charge pas le probleme que j'arrive pas a passer des variable en js vers php

voila mon code

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
 
function ajax(page,cible)
{
var xhr=null;
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest;
}
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
 
xhr.onreadystatechange= function()
{
   if (xhr.readyState == 4)      {
      document.getElementById(cible).innerHTML=xhr.responseText;
   }
}
 
xhr.open('GET',page,true);
xhr.send(null)
}

inscription.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
 
<form id="form1" name="form1" method="post" action="ecriture.php" onsubmit="return control()">
<table width="96%" height="50" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="30%">&nbsp;&nbsp;<span class="Style2">Nom</span></td>
        <td width="70%"><label>
          <input name="nom" type="text" class="Style2" id="nom" />
        </label></td>
      </tr>
      <tr>
        <td height="38">&nbsp;&nbsp;<span class="Style2">E-mail</span></td>
        <td height="38"><label>
          <input name="mail" type="text" class="Style2" id="mail" />
        </label></td>
      </tr>
      <tr>
        <td height="33">&nbsp;</td>
        <td valign="top"><label>
              <div align="center"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <label>
                  <input name="valider" type="submit" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre'); return false" />
                  </label>
                  <br />
                  <label></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label></label>
                <label></label>
              </div>
          </label></td>
      </tr>
    </table>
</form>

ecriture.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
 
<?php
$host = "localhost"; // voir hébergeur
$user = "root"; // vide ou "root" en local
$pass = ""; // vide en local
$bdd = "newslettre"; // nom de la BD
 
 
@mysql_connect($host,$user,$pass)
   or die("Impossible de se connecter avec le serveur");
@mysql_select_db("$bdd")
   or die("Impossible de se connecter avec La base de données");
 
if (isset($_POST['valider']))
{
$nom=stripslashes($_POST['nom']); //Nom
$mail=stripslashes($_POST['mail']); //mail
$date=date('y/m/d');
if(!empty($nom) && !empty($mail))
{
$sql="insert into client values('', '$nom', '$mail', '$date')";
mysql_query($sql) or die("erreur l'ajout des donnee". mysql_error());
?>
<table width="28%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td height="19" colspan="2"><label></label>
        <label></label>
        <label> </label>
        <div align="center" class="stylnomdomain">Etat d'envoi </div></td>
  </tr>
  <tr>
    <td width="21%" height="113" class="Style4"><img src="images/ok.png" width="58" height="57" /></td>
    <td width="79%" height="113" class="Style4"><div align="center"><br />
        Votre Inscription a &eacute;t&eacute; ajout&eacute; avec suc&eacute;e<br />
        <br />
      <a href="index.php" onclick="ajax('index.php', 'newslettre'); return false">Retour</a></div></td>
  </tr>
</table>
<?php
mysql_close();
}
}
?>

le problem c'est qu'il me fais l'ajout dans la table mais il m'affiche pas le tableau inclu dans ecriture.php (votre inscription a été ajouté avec succe

) svp aidez moi sur ca

**andry.aime** · 09/04/2009, 15h45

Salut

Code :

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

<input name="valider" type="submit" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre');" />

Il n'y a pas d'id newslettre dans ta page pour l'affichage.

**sooprano** · 09/04/2009, 16h20

Envoyé par andry.aime

Salut

Code :

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

<input name="valider" type="submit" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre');" />

Il n'y a pas d'id newslettre dans ta page pour l'affichage.

oui j'ai Div id="newslettre" voila

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
 
<div id="newslettre">
<form id="form1" name="form1" method="post" action="ecriture.php" onsubmit="return control()">
<table width="96%" height="50" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="30%">&nbsp;&nbsp;<span class="Style2">Nom</span></td>
        <td width="70%"><label>
          <input name="nom" type="text" class="Style2" id="nom" />
        </label></td>
      </tr>
      <tr>
        <td height="38">&nbsp;&nbsp;<span class="Style2">E-mail</span></td>
        <td height="38"><label>
          <input name="mail" type="text" class="Style2" id="mail" />
        </label></td>
      </tr>
      <tr>
        <td height="33">&nbsp;</td>
        <td valign="top"><label>
              <div align="center"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <label>
                  <input name="valider" type="submit" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre'); return false" />
                  </label>
                  <br />
                  <label></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label></label>
                <label></label>
              </div>
          </label></td>
      </tr>
    </table>
</form>
 </div>

**emmanuel.remy** · 09/04/2009, 16h26

Pourquoi utiliser un bouton de type submit pour cela ?
Plutôt un type button.

Code :

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

1
2
 
<input name="valider" type="submit" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre'); return false" />

Et au retour de l'appel AJAX on est bine d'accord que tu supprimes TOUT ton formulaire ??

ERE

**sooprano** · 09/04/2009, 16h54

Envoyé par emmanuel.remy

Pourquoi utiliser un bouton de type submit pour cela ?
Plutôt un type button.

Code :

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

1
2
 
<input name="valider" type="submit" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre'); return false" />

Et au retour de l'appel AJAX on est bine d'accord que tu supprimes TOUT ton formulaire ??

ERE

j'ai utliser bouton submit parceque j'utilise methode post pour envoyer les données

bon je crois puisque j'utilise ajax je dois envoyer des variables dans js

voila le code 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
 
function ajax(page,cible)
{
var xhr=null;
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest;
}
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
 
xhr.onreadystatechange= function()
{
   if (xhr.readyState == 4)      {
      document.getElementById(cible).innerHTML=xhr.responseText;
   }
}
 var nom=document.form1.nom.value;
var mail=document.form1.mail.value;
xhr.open('POST',page?nom=nom&mail=mail,true);
xhr.send(null)
}

on mettons input type button à la place type submit ainsi on éliminant <

le probleme que sa marche pas

**andry.aime** · 09/04/2009, 17h04

En utilisant AJAX, tu n'as pas besoin d'attribué une methode pour l'envoie de donnée, d'ailleur si tu utilises submit, la page se recharge donc pas d'utilité l'utilisation d'AJAX.

xhr.open('POST',page?nom=nom&mail=mail,true);
xhr.send(null)

tu confond l'utilisation de POST et GET.

Code :

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

1
2
3
xhr.open("POST", page,true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('nom='+nom+'&mail='+mail)

**emmanuel.remy** · 09/04/2009, 17h25

@sooprano:

http://ajax.developpez.com/cours/

ERE

**sooprano** · 09/04/2009, 17h41

Envoyé par andry.aime

En utilisant AJAX, tu n'as pas besoin d'attribué une methode pour l'envoie de donnée, d'ailleur si tu utilises submit, la page se recharge donc pas d'utilité l'utilisation d'AJAX.

tu confond l'utilisation de POST et GET.

Code :

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

1
2
3
xhr.open("POST", page,true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('nom='+nom+'&mail='+mail)

oui t'as raison

voila mon dernier code

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
 
function ajax(page,cible)
{
var xhr=null;
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest;
}
if(window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
 
xhr.onreadystatechange= function()
{
   if (xhr.readyState == 4)      {
      document.getElementById(cible).innerHTML=xhr.responseText;
   }
}
 xhr.open("POST", page,true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('nom='+nom+'&mail='+mail)
}

inscription.html

Code :

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

1
2
3
4
 
<div id="newslettre">
<input name="valider" type="button" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax1('ecriture.php', 'newslettre'); return false"/>
</div>

maleuresement sa marche pas

**emmanuel.remy** · 09/04/2009, 17h47

Code :

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

1
2
3
//ta fonction s'appelle ajax(...)
onclick="ajax1('ecriture.php', 'newslettre'); return false"

ERE

**sooprano** · 09/04/2009, 18h08

Envoyé par emmanuel.remy

Code :

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

1
2
3
//ta fonction s'appelle ajax(...)
onclick="ajax1('ecriture.php', 'newslettre'); return false"

ERE

oui ma fonction s'appelle ajax

Code :

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

<input name="valider" type="button" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre'); return false"/>

**sooprano** · 09/04/2009, 18h10

Envoyé par sooprano

oui ma fonction s'appelle ajax

Code :

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

<input name="valider" type="button" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax('ecriture.php', 'newslettre'); return false"/>

mais ca marche pas

j'en sais pas ou se trouve l'erreur

**emmanuel.remy** · 09/04/2009, 18h53

Re,

Quand andry.aime te donne ce code:

Code :

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

1
2
3
4
 
xhr.open("POST", page,true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('nom='+nom+'&mail='+mail)

, cela induit qu'il faut passer les valeurs du nom et du mail.

Je ne le vois nulle part dans ton code.

ERE

**sooprano** · 10/04/2009, 00h20

Envoyé par emmanuel.remy

Re,

Quand andry.aime te donne ce code:

Code :

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

1
2
3
4
 
xhr.open("POST", page,true);
	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('nom='+nom+'&mail='+mail)

, cela induit qu'il faut passer les valeurs du nom et du mail.

Je ne le vois nulle part dans ton code.

ERE

oui ta rasion bon j'ai j'ai modifier mon code

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
function getXhr(){
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
try {xhr = new ActiveXObject("Msxml2.XMLHTTP");}
		catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		        }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
	 alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
              return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
	function ajax1(){
	var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('newslettre').innerHTML = leselect;
					}
			}
 
				// Ici on va voir comment faire du post
	xhr.open("POST","ecriture.php",true);
				// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
 
			var nom=document.getElementById('nom').value;
				var mail=document.getElementById('mail').value;
				xhr.send('nom='+nom+'&mail='+mail);
			}

Code :

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

<input name="valider" type="button" id="valider" value="inscrivez vous" class="button1" onmouseover="vert()" onmouseout="bleu()" onclick="ajax1()"/>

ecriture.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
<!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=iso-8859-1" />
<title>Document sans titre</title>
<link rel="stylesheet" href="css/monstyle.css">
<body>
<?php
$host = "localhost"; // voir hébergeur
$user = "root"; // vide ou "root" en local
$pass = ""; // vide en local
$bdd = "newslettre"; // nom de la BD
 
 
@mysql_connect($host,$user,$pass)
   or die("Impossible de se connecter avec le serveur");
@mysql_select_db("$bdd")
   or die("Impossible de se connecter avec La base de données");
 
if (isset($_POST['valider']))
{
$nom=stripslashes($_POST['nom']); //Nom
$mail=stripslashes($_POST['mail']); //mail
$date=date('y/m/d');
if(!empty($nom) && !empty($mail))
{
$sql="insert into client values('', '$nom', '$mail', '$date')";
mysql_query($sql) or die("erreur l'ajout des donnee". mysql_error());
?>
<table width="235" height="132" border="1">
  <tr>
    <td><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td height="19" colspan="2"><label></label>
            <label></label>
            <label> </label>
            <div align="center" class="stylnomdomain">Etat d'envoi </div></td>
      </tr>
      <tr>
        <td width="21%" height="113" class="Style4"><img src="images/ok.png" width="58" height="57" /></td>
        <td width="79%" height="113" class="Style4"><div align="center"><br />
          Votre Inscription a &eacute;t&eacute; ajout&eacute; avec suc&eacute;e<br />
          <br />
          <a href="index.php" onclick="ajax('inscription.html', 'newslettre'); return false">Retour</a></div></td>
      </tr>
    </table></td>
  </tr>
</table>
<?php
mysql_close();
}
}
 
?>
</body>
</html>

bon malgré tout sa marche pas quand je clique sur button je vois aucune enregistrement dans ma table ainsi le tableau qui porte le message (l'enregistrement est ajouté avec succée n'apparait pas

**emmanuel.remy** · 10/04/2009, 00h27

ecriture.php n'est pas une page html normale, c'est juste un bout de code HTML qui sera inséré au retour de ton appel ajax. Alors ennlève tout le superflux (balises html, body ...)

ERE

**andry.aime** · 10/04/2009, 07h34

Tu test les valeurs postées par

if (isset($_POST['valider']))

mais dans ton post il n'y a pas de variable valider mais seulement nom et mail

xhr.send('nom='+nom+'&mail='+mail);

Ainsi if (isset($_POST['valider'])) retourne toujours false et ton insertion ne sera pas effectuer.

**sooprano** · 10/04/2009, 17h11

Envoyé par andry.aime

Tu test les valeurs postées par mais dans ton post il n'y a pas de variable valider mais seulement nom et mail
Ainsi if (isset($_POST['valider'])) retourne toujours false et ton insertion ne sera pas effectuer.

oups je me suis trompé sur ca ca marche merci

[AJAX] passage variable coté vers coté serveur via ajax

AJAX

Discussions similaires

Partager

Partager