Requete PHP à exécuter dans du javascript

vct -  
Bonjour,

je m'y perd parmi tous les topic dans ce forum alors j'ai créé mon propre topic.

Je m'initie à l'ajax et j'aimerais ajouter des données que j'ai en php sans recharger l'ensemble de la page.
Je n'arrive pas à inclure du php dans le javascript
J'ai essayé ceci où "ajoute()" est une fonction php mais ça ne marche pas..

document.getElementById("conteneur").innerHTML = "Requête exécutée avec succès.<input type='button' value='Terminer' onclick='location.href=\"index.php\"' />";
document.getElementById("conteneur").innerHTML = ajouter();

Avez-vous une idée ?
Merci
Configuration: Windows Vista
Firefox 2.0.0.16

29 réponses

Résumé de la discussion

Le problème central est d’intégrer des données PHP dans une page web via Ajax sans recharger l’ensemble, en utilisant JavaScript pour mettre à jour le contenu d’un conteneur. La solution consiste à appeler un script PHP sur le serveur avec Ajax (XMLHttpRequest), obtenir la réponse et écrire le résultat dans le DOM à l’aide de innerHTML. Il faut séparer les rôles : PHP s’exécute côté serveur, JavaScript côté client, et éviter de placer du PHP dans du code déjà chargé par le navigateur, en invoquant un script distinct. Pour les besoins d’actualisation en temps réel lorsque plusieurs utilisateurs consultent la même page, un mécanisme de polling ou une solution de push côté serveur peut être envisagé.

Bobot (l’IA à votre service)
  1. vct
    Non je dois pas être clair.
    Si quelqu'un consulte le carnet d'adresse et qu'une autre personne ajoute une personne en même temps je voulais que pour la personne qui consulte, la page se mette à jour.

    Tu vois?
    1. Alain_42
      Si qq un ajoute une adresse => la base va se mettre à jour automatiquement, donc si une autre personne consulte elle aura forcement la page à jour.
  2. vct
    Hello,
    Effectivement, mon but n'est pas de rafraichir mon navigateur or c'est ce que mail m'oblige à faire.
    Tu comprends mon contexte ? Si plein de personne visite mon carnet d'adresse il faudrait que la page soit rafraichie chez chacun des visiteurs. Mais bon, peux être que le système de tchat utilise aussi les temps. Mais c'est bizarre car il arrive, par exemple msn, à détecter quand une personne est en train de rédiger, et de me donner l'info comme quoi l'interlocuteur est en train de rédiger.
    Cruel dilemme...

    Vct;
    1. Alain_42
      Oui mais msn il doit y avoir un systeme de connexion, avec un serveur au milieu qui ne doit pas être sur le même principe qu'un serveur web

      Si j'ai bien compris ce que tu veux c'est savoir qd qq un visite ton carnet d'adresse. Mais si c'est à 1 heure du mat, il faudra que tu soit toujours present devant ton micro.

      Pourquoi ne pas enregistrer dans une table de la BDD qd il y a une requette de SELECT sur ta base ?

      table que tu viendra consulter qd tu veux.
  3. vct
    Me revoilà j'ai essayé de faire un refresh en html et devine quoi ça fonctionne !
    voici le code de mon refresh

    <meta http-equiv="refresh" content="30;url=javascript:refresh(<?php echo $nbrResultat; ?>);" />

    Maintenant je dois passer à l'étape suivante, c'est mettre à jour la page de résultat lorsqu'il y a une nouvelle entrée dans la base de donnée mais c'est pas évident et je ne sais pas si c'est réalisable sans "écouteur" (comme des listener en flash), l'"écouteur" étant mon refresh en ce moment...
    Si quelqu'un a une piste je suis preneur.
    Ca doit être possible puisque les tchats mettent à jour leur affichage immédiatement.

    Vincent.
    1. Alain_42
      Salut,

      tu aurait pu faire aussi avec la fonction SetTimout() de javascript

      Qui lancerait la fonction Ajax à intervalles réguliers.

      Pour ce qui est de la nouvelle entrée, tu as l'évenemnt puisque le script php va faire le INSERT

      Envoyer un mail ce serait facile.

      Mais je ne vois pas comment faire l'info vers ton navigateur, car le serveur ne répond que à des demandes du navigateur, mais ne peut pas à mon avis envoyer des infos à un navigateur client autre (heureusement car il y aurait de gros pb de sécurité)

      Ou alors il faudrait savoir comment font ceux qui t'envoient de la pub pyrate qd tu visite un site ?
  4. vct
    Alain !!! Tu es carrément génial.
    Merci pour ton aide, j'ai réussi grâce à toi à faire fonctionner mon ajax pour afficher les données de mon carnet d'adresse si j'ai de nouveau enregistrement qui se sont fait.
    Maintenant je vais passer à un refresh automatique pour voir si ça marche mais je te tiens au courant!

    A bientôt et bon week end.
    Vincent;
    2. vct
      Alain tu m'as abandonné?
      Je conçois que tu m'ai bien aidé mais ne me laisse pas tomber à ce stade là :)

      Bye,
      Vincent.
      1. Alain_42
        Salut,

        Je ne t'ai pas abandonné mais un peu absent.

        tu as 2 erreurs dans ta fonction:

        il faut :
        var data = "nbrResultat="+nbrResultat;


        il faut que la variable ait un nom pour pouvoir la récupérer en POST dans ton script appelé

        et là pour ecrire la réponse il faut: 

        var reponse=xhr.responseText;
alert("Reponse du script enregistrement.php: "+reponse);
document.getElementById('tableau').innerHTML=reponse;


        ça va ecrire et écraser ce qu'il y a dans ta <table id="tableau" enfin je suppose car moi je met toujurs un <div id="

        @lain
    3. vct
      Bonsoir,
      Je suis au stade de conception cette fois ci et j'ai décidé de commencer par le former sur un bouton qui me permet de rafraichir.
      J'ai mon code php qui cherche les informations dans la base de donnée et au bas de mon tableau j'ai créé un bouton qui appel une fonction javascript (ajax) et de la même manière que pour enregistrer un nouvel individu dans la base, j'appel un fichier php qui va comparer le nombre de résultat que j'ai avec le nombre de résultat qu'il y a au moment du rafraichissement. La variable du nombre est bien passé d'une page à l'autre.
      Sur cette autre page je refais la même démarche d'afficher dans un tableau la base de donnée. Mais je ne sais pas comment faire un retour visuel sur l'autre page. voici les fichiers :

      visualiser-carnet-adresse.php

      <!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>Visualiser le carnet d'adresse</title>
      <link rel="stylesheet" type="text/css" href="carnet-dadresse.css" />
      <script language="javascript" type="text/javascript">
      function refresh(nbrResultat){
      var xhr;
      try {
      xhr = new ActiveXObject('Msxml2.XMLHTTP');
      }
      catch (e){
      try { xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }
      catch (e2){
      try {
      xhr = new XMLHttpRequest();
      }
      catch (e3) {
      xhr = false;
      }
      }
      }

      xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
      if(xhr.status==200){
      var reponse=xhr.responseText;
      alert("Reponse du script enregistrement.php: "+reponse);
      document.getElementById('tableau').innerHTML="cool";
      }else{
      document.getElementById('tableau').innerHTML="Error code " + xhr.status;
      }
      }
      }

      xhr.open("POST", "recup-data-base.php", true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      var data = nbrResultat
      alert ("valeurs envoyees: "+ data);
      xhr.send(data);
      }
      </script>
      </head>

      <body>
      <h1>Visualiser le carnet d'adresse</h1>
      <?php
      mysql_connect("localhost", "root", "");
      mysql_select_db("carnet_adresse");
      $requete=mysql_query("SELECT * FROM carnet");
      $nbrResultat=mysql_num_rows($requete);
      if ($nbrResultat>0){
      echo "<table id='tableau' class='cadre-visualiser'>";
      while($donnees=mysql_fetch_array($requete)){
      ?>
      <tr>
      <td><?php echo $donnees['prenom']; ?></td>
      <td><?php echo $donnees['nom']; ?></td>
      <td><?php echo $donnees['lieu']; ?></td>
      <td><?php echo $donnees['tel_fixe']; ?></td>
      <td><?php echo $donnees['tel_portable']; ?></td>
      <td><?php echo $donnees['adresse']; ?></td>
      <td><?php echo $donnees['email']; ?></td>
      <td><?php echo $donnees['date']; ?></td>
      </tr>
      <?php
      }
      echo "<tr><td colspan='8' align='right'><input type='button' value='rafraichir' onClick='refresh($nbrResultat);' /></td></tr>";
      echo "</table>";
      }
      ?>
      </body>
      </html>

      recup-data-base.php

      <?php
      if (isset($_POST['nbrResultat']) && $_POST['nbrResultat']!=NULL){
      mysql_connect("localhost", "root", "");
      mysql_select_db("carnet_adresse");
      $requete=mysql_query("SELECT * FROM carnet");
      $combienResultat=mysql_num_rows($requete);
      if($combienResultat>$nbrResultat){
      //requete d'affichage des résultats
      echo "<table class='cadre-visualiser'>";
      while($donnees=mysql_fetch_array($requete)){
      ?>
      <tr>
      <td><?php echo $donnees['prenom']; ?></td>
      <td><?php echo $donnees['nom']; ?></td>
      <td><?php echo $donnees['lieu']; ?></td>
      <td><?php echo $donnees['tel_fixe']; ?></td>
      <td><?php echo $donnees['tel_portable']; ?></td>
      <td><?php echo $donnees['adresse']; ?></td>
      <td><?php echo $donnees['email']; ?></td>
      <td><?php echo $donnees['date']; ?></td>
      </tr>
      <?php
      }
      echo "<tr><td colspan='8' align='right'><input type='button' value='rafraichir' onClick='refresh($nbrResultat);' /></td></tr>";
      echo "</table>";
      }else{
      //rien sinon une info "pas de nouvelles données"
      }
      }
      ?>

      Vincent.
      1. vct
        Je verrais ça car je suis encore au stade de réflexion..
        En revanche je ne vois pas l'intérêt d'envoyer un mail car mon but est que les données s'actualisent si quelqu'un visite mon carnet d'adresse. Et non pas consulter à la demande.

        Prenons sinon pour exemple si une donnée change cette donnée dois se changer en directe sur la page de consultation comme une web radio. enfin je me répète.

        On verra je réfléchis aux solutions envisageables pendant les 5mn que je bosse dessus par jour hihi.

        Vct
        1. vct
          Alors je peux peut-être faire des refresh en ajax tous les 2minutes par exemple et vérifier uniquement le reste des données de la base s'il y a lieu.
          Par exemple si on a :
          ID: 01 nom: Franck DUTRONC Lieu: Paris ....
          ID: 02 nom: Vincent DILIEU Lieu: Lille....
          ID: 03 nom: Isabelle SEILOR Lieu: Caen....

          on retient les id restitués dans un tableau et on vérifie avec une requete s'il y a de nouvelles données.

          En résumé à la demande d'un client ce n'est pas possible mais un rafraichissement selon une durée et tester les nouvelles données c'est possible ?

          Vincent.
          1. Alain_42
            Oui avec un refresh ça peut marcher
          2. Alain_42
            Mais le refresh va te recharger la page , ça peut être génant

            mets une fonction SetTimeout(....) juste après ta fonction Ajax dans la partie <script javascript >
            qui va te lancer une fonction Ajax à intervales réguliers pour aller lire la BDD

            Sinon une autre solution:

            quand qq'un entre un nouvel enregistrement le script t'envoie un mail par la fonction mail() de php

            @lain
        2. vct
          Non tu n'as pas compris mon cas.
          J'ai une page d'enregistrement
          Et j'ai une page de restitution des données.
          Et dans le cas où je mettrais en ligne ce micro site et que j'ai la page de restitution ouverte et que en parallèle un individu s'ajoute j'aimerais que ma page s'actualise.
          Comme le principe de listener dans flash.
          Et c'est un peu le même cas de figure que lorsque tu écoutes la radio en ligne et que le titre et l'artiste change lorsque la musique change.

          Vincent.
          1. Alain_42
            Dur ton cas car je ne pense pas que ce soit possible d'envoyer à un poste client le résultat d'une requette faite à la demande d'un autre poste client.

            Le principe du web, tu reçoit une réponse à ta demande
        3. vct
          Oui j'ai noté l'apostrophe qui manquait. tu crois que c'est ça qui bloquait ?
          Maintenant nouvelle phase parmi l'ajax...
          Pour l'affichage du carnet d'adresse je voudrais que le tableau qui me restitue les données de la base s'actualise lorsqu'il y a une nouvelle entrée dans la base, tu saurais m'aiguiller sur le principe ? Parce que de tête j'arrive pas à visualiser, je pensais juste a faire un refresh en en html toutes les x secondes mais du coup c'est géré par un temps et non d'après les nouvelles données entrées par un utilisateur.

          Merci tout plein pour ton aide concernant le travail que tu as fournis, sans toi je n'en saurais rien et j'aurais probablement abandonné... et pourtant je me dois d'être informé de la technologie ajax je suis webmaster :)

          Vincent.
          1. Alain_42
            Bonsoir,

            par le script enregistrement.php après la requette d'INSERT tu fais une requette SELECT

            et la réponse viendra par Ajax

            et tu écris cette réponse dans la page dans un div par .innerHTML
        4. vct
          Hello Alain,
          J'apporte de bonnes nouvelles!

          L'ajax fonctionne.
          Juste pour info j'ai remarqué que tu m'as remplacé "requete" par "requette" mais c'est mal orthographié. :)
          J'avais changé http_request par xhr, et c'est évident que ça ne fonctionnait pas.

          J'ai remplacé cela :

          $query="INSERT INTO carnet VALUES ('', '".$prenom."','".$nom."','".$lieu."','".$tel_fixe."','".$tel_portable."','".$adresse."','".$email."','".$date.")";

          Par

          $query="INSERT INTO carnet VALUES ('', '$prenom','$nom','$lieu','$tel_fixe','$tel_portable','$adresse','$email','$date')";

          ...dans le fichier "enregistrement.php"

          ET AUSSI

          <input type="button" value="Valider" onClick="submitForm('enregistrement.php','info',<?php echo "'ok','".$prenom."','".$nom."','".$lieu."','".$tel_fixe."','".$tel_portable."','".$adresse."','".$email."','".$date."'"; ?>);" />

          Par

          <input type="button" value="Valider" onClick="submitForm('enregistrement.php','info',<?php echo "'ok','$prenom','$nom','$lieu','$tel_fixe','$tel_portable','$adresse','$email','$date'"; ?>);" />

          ...dans le fichier "nouvelle-personne.php"

          D'un coup c'est bizarre j'adore l'ajax hihi,

          Donne moi des nouvelles,
          Vincent.
          1. Alain_42
            Il manquait une petite ' juste avant la ) à la fin de: 

            $query="INSERT INTO carnet VALUES ('', '".$prenom."','".$nom."','".$lieu."','".$tel_fixe."','".$tel_portable."','".$adresse."','".$email."','".$date."')";


            parce que ça devrait marcher avec cette methode

            par contre pour la ligne <input c'est possible que ça gène

            Si ça marche tant mieux pour toi

            Et Ajax super !
        5. vct
          C'est bien gentil mais j'aimerais encore persévérer en pratiquant un peu mais si jamais je suis un cas de problème majeur et que ça ne marche pas après cette manipulation je te passerai la main :)

          Vincent.
          1. vct
            Hello Alain.
            Désolé hier soir je n'ai pu tester finalement.
            Je vais essayer ce soir mais sans garantie car j'ai un rapport de projet à faire.
            Je te tiens au courant...

            Bonne journée,
            Vincent.
            1. Alain_42
              Sinon tu m'envoie les fichiers par mail en pièce jointe par MP
          2. vct
            Hello,
            Alain de retour, et dans quel ville tu étais pour ces vacances ? :)
            D'accord je vais tester ce que tu me dis ce soir je pars faire des courses avant, à tout à l'heure : je te donnerai des nouvelles.

            A+
            1. Alain_42
              Ce ne sont pas vraiment des vacances mais une maison de campagne dans un petit village.

              A+
          3. vct
            Hello,
            Les variables s'affichent correctement dans une boite d'alerte maintenant, que ce soit en dur ou par variable : nickel, le problème venait de l'absence de simple quote autour des variables à l'appel de la fonction javascript.

            En revanche j'ai utilisé la console d'erreur et elle m'indique que cette ligne pose problème :
            var reponse=http_request.responseText;

            C'est bien le cas parce que c'est la seule boite d'alerte (déclarée la ligne suivante) qui ne s'affiche pas :
            alert("Reponse du script enregistrement.php: "+reponse);

            Par contre dans la base de donnée toujours rien et toujours aucun message qui ne s'affiche sur ma page après clic sur le bouton.

            A bientôt,
            Vct
            1. Alain_42
              Salut, me voilà de retour de ma campagne.

              En revanche j'ai utilisé la console d'erreur et elle m'indique que cette ligne pose problème :
              var reponse=http_request.responseText;

              C'était uncopier coller à partir d'une fonction à moi, je l'avais modifié dans la fonction et t'avais mis un commentaire

              il faut que tu remplaces :
              var reponse=http_request.responseText;

              par var reponse=xhr.responseText;

              Pour ce qui est de l'enregistrement dans la BDD, as tu fais l'essai en metant les valeurs "en dur" dans le script enregistrement.php
              puis tu appelles le script en tapant http/......../enregistrement.php directement dans ton navigateur
              et tu verra bien si ça enregistre

              @lain
          4. vct
            Les boîtes d'alertes ne s'affichent même pas, à priori le js n'ait même pas appelé. D'ailleurs j'ai même mi une alerte au tout début de la fonction mais rien n'y fait.

            Voici mon formulaire qui appel le js et j'ai supprimé les éléments de type <input type='hidden'> puisqu'ils ne servent à rien :

            <form name="ma_form" method="post">

            <input type="button"
            value="Valider"
            onClick="submitForm('enregistrement.php','info',<?php echo "ok,".$prenom.",".$nom.",".$lieu.",".$tel_fixe.",".$tel_portable.",".$adresse.",".$email.",".$date; ?>);" />

            </form>

            Vct
            1. Alain_42
              Bonsoir,

              il faut rajouter des ' de part et d'autre des variables dans la ligne d'appel de la fonction comme ci dessous

              attention il y a aussi une modif à faire dans la fonction, j'ai mis un commentaire

              j'ai mis des valeurs bidon pour faire l'essai chez moi ça marche maintenant

              notes qu'il faut coder les caractères accentués é = é 

              <!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>Nouvelle personne dans le carnet d'adresse</title>
<link rel="stylesheet" type="text/css" href="carnet-dadresse.css" />
<script language="javascript" type="text/javascript">
function submitForm(url,id_ecrire,valide, prenom, nom, lieu, tel_fixe, tel_portable, adresse, email, date){
	var xhr;
	try {
		xhr = new ActiveXObject('Msxml2.XMLHTTP'); 
	}
	catch (e){
		try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
		}
		catch (e2){
			try {
				xhr = new XMLHttpRequest();
			}
			catch (e3) {
				xhr = false; 
			}
		}
	}

	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
			//attention j'ai modifie la ligne ci dessous
				var reponse=xhr.responseText;
				alert("Reponse du script enregistrement.php: "+reponse);
				
				var obj=document.getElementById(id_ecrire);
				obj.innerHTML=reponse+" <a href='index.php'>back</a>";
			}else{
				var obj=document.getElementById(id_ecrire);
				obj.innerHTML=reponse;
			}
		}
	}

	xhr.open("POST", url, true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	var data = "valide="+valide+"&prenom="+prenom+"&nom="+nom+"&lieu="+lieu+"&tel_fixe="+tel_fixe+"&tel_portable="+tel_portable+"&adresse="+adresse+"&email="+email+"&date="+date;
	alert ("valeurs envoyees: "+data);
	xhr.send(data);
}
</script>
</head>

<body>
<h1>Nouvelle personne dans le carnet d'adresse</h1>
<?php
/*
if(isset($_POST['prenom']) && isset($_POST['nom']) && isset($_POST['lieu'])){
if($_POST['prenom']!=NULL && $_POST['nom']!=NULL && $_POST['lieu']!=NULL){
$prenom=$_POST['prenom'];
$nom=$_POST['nom'];
$lieu=$_POST['lieu'];
if(isset($_POST['tel_fixe']) && $_POST['tel_fixe'] != NULL){
$tel_fixe=$_POST['tel_fixe'];
}else{
$tel_fixe="";
}
if(isset($_POST['tel_portable']) && $_POST['tel_portable'] != NULL){
$tel_portable=$_POST['tel_portable'];
}else{
$tel_portable="";
}
if(isset($_POST['adresse']) && $_POST['adresse'] != NULL){
$adresse=$_POST['adresse'];
}else{
$adresse="";
}
if(isset($_POST['email']) && $_POST['email'] != NULL){
$email=$_POST['email'];
}else{
$email="";
}
*/
$prenom="Jules";
$nom="CESAR";
$lieu="Rome";
$tel_fixe="1234567890";
$tel_portable="0987654321";
$adresse="rue descendante";
$email="toto@orange.fr";
$date=date("Y-m-d H:i:s");
echo "<div id='conteneur'>";
echo "Pr&eacute;nom : ".$prenom."<br />";
echo "Nom : ".$nom."<br />";
echo "Lieu de connaissance : ".$lieu."<br />";
echo "T&eacute;l&eacute;phone fixe : ".$tel_fixe."<br />";
echo "T&eacute;l&eacute;phone portable : ".$tel_portable."<br />";
echo "Adresse : ".$adresse."<br />";
echo "Email : ".$email."<br />";
echo "Les donn&eacute;es sont correctes et je valide le nouveau membre du r&eacute;pertoire : ";
?>
<form name="ma_form" method="post">

<input type="button" value="Valider" onClick="submitForm('enregistrement.php','info',<?php echo "'ok','".$prenom."','".$nom."','".$lieu."','".$tel_fixe."','".$tel_portable."','".$adresse."','".$email."','".$date."'"; ?>);" />
<?php
echo "</form>";
echo "</div>";
/*
}
}
*/
?>

<div id="info"></div>
</body>
</html>
            2. Alain_42
              Re,

              je vois que tu as Firefox, alors utilises la console d'erreur du menu outils pour voir les erreurs éventuelles de javascript

              dans mon precedent post il faut lire é = &eacute suivi d'un point virgule

              le code a été interprété.

              @lain
          5. vct
            C'est quand même incroyable, bien que j'ai fait un copié collé du code que tu viens de me donner, rien ne se passe : ni la requête et même pas l'affichage du texte "ok" ou "error".

            Tu crois qu'on peut encore trouver un problème dans le code ou c'est la fin du monde ?

            vct
            1. Alain_42
              Ok alors on va voir ce qui se passe en metant des alert javascript

              pour nouvelle-personne.php 

              <!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>Nouvelle personne dans le carnet d'adresse</title>
<link rel="stylesheet" type="text/css" href="carnet-dadresse.css" />
<script language="javascript" type="text/javascript">
function submitForm(url,id_ecrire,valide, prenom, nom, lieu, tel_fixe, tel_portable, adresse, email, date){
	var xhr;
	try {
		xhr = new ActiveXObject('Msxml2.XMLHTTP'); 
	}
	catch (e){
		try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
		}
		catch (e2){
			try {
				xhr = new XMLHttpRequest();
			}
			catch (e3) {
				xhr = false; 
			}
		}
	}

	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				var reponse=http_request.responseText;
				alert("Reponse du script enregistrement.php: "+reponse);
				
				var obj=document.getElementById(id_ecrire);
				obj.innerHTML=reponse+" <a href='index.php'>back</a>";
			}else{
				var obj=document.getElementById(id_ecrire);
				obj.innerHTML=reponse;
			}
		}
	}

	xhr.open("POST", url, true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	var data = "valide="+valide+"&prenom="+prenom+"&nom="+nom+"&lieu="+lieu+"&tel_fixe="+tel_fixe+"&tel_portable="+tel_portable+"&adresse="+adresse+"&email="+email+"&date="+date;
	alert ("valeurs envoyees: "+data);
	xhr.send(data);
}
</script>
</head>

<body>
<h1>Nouvelle personne dans le carnet d'adresse</h1>
<?php

if(isset($_POST['prenom']) && isset($_POST['nom']) && isset($_POST['lieu'])){
if($_POST['prenom']!=NULL && $_POST['nom']!=NULL && $_POST['lieu']!=NULL){
$prenom=$_POST['prenom'];
$nom=$_POST['nom'];
$lieu=$_POST['lieu'];
if(isset($_POST['tel_fixe']) && $_POST['tel_fixe'] != NULL){
$tel_fixe=$_POST['tel_fixe'];
}else{
$tel_fixe="";
}
if(isset($_POST['tel_portable']) && $_POST['tel_portable'] != NULL){
$tel_portable=$_POST['tel_portable'];
}else{
$tel_portable="";
}
if(isset($_POST['adresse']) && $_POST['adresse'] != NULL){
$adresse=$_POST['adresse'];
}else{
$adresse="";
}
if(isset($_POST['email']) && $_POST['email'] != NULL){
$email=$_POST['email'];
}else{
$email="";
}
$date=date("Y-m-d H:i:s");
echo "<div id='conteneur'>";
echo "Prénom : ".$prenom."<br />";
echo "Nom : ".$nom."<br />";
echo "Lieu de connaissance : ".$lieu."<br />";
echo "Téléphone fixe : ".$tel_fixe."<br />";
echo "Téléphone portable : ".$tel_portable."<br />";
echo "Adresse : ".$adresse."<br />";
echo "Email : ".$email."<br />";
echo "Les données sont correctes et je valide le nouveau membre du répertoire : ";
?>
<form name="ma_form" method="post">
<?php

echo "<input type='hidden' name='prenom' value='$prenom' />";
echo "<input type='hidden' name='nom' value='$nom' />";
echo "<input type='hidden' name='lieu' value='$lieu' />";
echo "<input type='hidden' name='tel_fixe' value='$tel_fixe' />";
echo "<input type='hidden' name='tel_portable' value='$tel_portable' />";
echo "<input type='hidden' name='adresse' value='$adresse' />";
echo "<input type='hidden' name='email' value='$email' />";
echo "<input type='hidden' name='date' value='$date' />";
?>
<!-- attention, j'ai modifié la fonction, on passe en plus le nom du script appelé et l'id du div a ecrire en arguments à la fonction -->
<input type="button" value="Valider" onClick="submitForm('enregistrement.php','info',<?php echo "ok,".$prenom.",".$nom.",".$lieu.",".$tel_fixe.",".$tel_portable.",".$adresse.",".$email.",".$date; ?>);" />
<?php
echo "</form>";
echo "</div>";
}
}
?>

<div id="info"></div>
</body>
</html>


              et dis moi si les boites d'alert contienent bien les noms prenoms etc... attendus

              ensuite pour tester ton script enregistrement.php, tu mets provisoirement des valeurs en dur à la place des $_POST['
              puis tu appelles le script en tapant http/......../enregistrement.php directement dans ton navigateur
              et tu verra bien si ça enregistre
          6. vct
            Hello,
            wow merci pour cette tonne d'explication!
            Je pensais pouvoir appeler une partie de la page elle même je ne pensais pas qu'il fallait qu'elle soit externalisée.

            En ce qui concerne le fait qu'on peut s'enregistrer plusieurs fois, ne t'inquiète pas c'est un utilitaire qui me sert à moi même en guise de carnet d'adresse mais si j'en ais besoin je saurais le faire, merci.

            Je test cela ce soir.
            Bonne journée!
            1. Alain_42
              Ok je part faire qq courses

              A+
          7. vct
            Hello,
            en fait j'ai deux pages :
            index.php > formulaire qui envois les données vers nouvelle-personne.php
            nouvelle-personne.php >donnée à valider avec un formulaire caché <input type="hidden"> et au clic sur le bouton j'appel l'ajax et j'envois les variables avec un valide=ok
            dans la meme page je vérifie si il existe un valide et s'il est égale à ok et alors je fais la requete sql

            Vct
            1. Alain_42
              Salut,

              j'ai relu un peu l'ensemble de ton post, tu n'a pas saisi complètement le principe de Ajax, car à un moment tu dis que la page se recharge lors de l'appel de Ajax.

              Si j'ai bien compris tu as

              une page index.php dans laquelle on saisi des valeurs, cette page appelle la page nouvelle-personne.php afin de faire confirmer les données saisies par l'utilisateur et c'est la que tu veux par Ajax enregistrer les valeurs.

              Alors la requette Ajax ne doit pas appeler le script nouvelle-personne.php sinon c'est normal que ça la recharge.

              Ajax doit appeler un autre script qui fera ce boulot d'enregistrement et rendra la réponse.

              En résumé:

              index.php ----->nouvelle-personne.php

              dans nouvelle personne.php (à la validation: fonction Ajax va appeler le script enregistrement.php)

              le script enregistrement.php va faire INSERT INTO... et donnera le résultat qui par le innerHTML serra écrit dans la page nouvelle-personne.php

              donc tes scripts deviennent:

              nouvelle-personne.php: 

              <!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>Nouvelle personne dans le carnet d'adresse</title>
<link rel="stylesheet" type="text/css" href="carnet-dadresse.css" />
<script language="javascript" type="text/javascript">
function submitForm(url,id_ecrire,valide, prenom, nom, lieu, tel_fixe, tel_portable, adresse, email, date){
	var xhr;
	try {
		xhr = new ActiveXObject('Msxml2.XMLHTTP'); 
	}
	catch (e){
		try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
		}
		catch (e2){
			try {
				xhr = new XMLHttpRequest();
			}
			catch (e3) {
				xhr = false; 
			}
		}
	}

	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				document.getElementById(id_ecrire).innerHTML="ok! <a href='index.php'>back</a>";
			}else{
				document.getElementById(id_ecrire).innerHTML="Error code " + xhr.status;
			}
		}
	}

	xhr.open("POST", url, true);
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	var data = "valide="+valide+"&prenom="+prenom+"&nom="+nom+"&lieu="+lieu+"&tel_fixe="+tel_fixe+"&tel_portable="+tel_portable+"&adresse="+adresse+"&email="+email+"&date="+date;
	xhr.send(data);
}
</script>
</head>

<body>
<h1>Nouvelle personne dans le carnet d'adresse</h1>
<?php

if(isset($_POST['prenom']) && isset($_POST['nom']) && isset($_POST['lieu'])){
if($_POST['prenom']!=NULL && $_POST['nom']!=NULL && $_POST['lieu']!=NULL){
$prenom=$_POST['prenom'];
$nom=$_POST['nom'];
$lieu=$_POST['lieu'];
if(isset($_POST['tel_fixe']) && $_POST['tel_fixe'] != NULL){
$tel_fixe=$_POST['tel_fixe'];
}else{
$tel_fixe="";
}
if(isset($_POST['tel_portable']) && $_POST['tel_portable'] != NULL){
$tel_portable=$_POST['tel_portable'];
}else{
$tel_portable="";
}
if(isset($_POST['adresse']) && $_POST['adresse'] != NULL){
$adresse=$_POST['adresse'];
}else{
$adresse="";
}
if(isset($_POST['email']) && $_POST['email'] != NULL){
$email=$_POST['email'];
}else{
$email="";
}
$date=date("Y-m-d H:i:s");
echo "<div id='conteneur'>";
echo "Prénom : ".$prenom."<br />";
echo "Nom : ".$nom."<br />";
echo "Lieu de connaissance : ".$lieu."<br />";
echo "Téléphone fixe : ".$tel_fixe."<br />";
echo "Téléphone portable : ".$tel_portable."<br />";
echo "Adresse : ".$adresse."<br />";
echo "Email : ".$email."<br />";
echo "Les données sont correctes et je valide le nouveau membre du répertoire : ";
?>
<form name="ma_form" method="post">
<?php

echo "<input type='hidden' name='prenom' value='$prenom' />";
echo "<input type='hidden' name='nom' value='$nom' />";
echo "<input type='hidden' name='lieu' value='$lieu' />";
echo "<input type='hidden' name='tel_fixe' value='$tel_fixe' />";
echo "<input type='hidden' name='tel_portable' value='$tel_portable' />";
echo "<input type='hidden' name='adresse' value='$adresse' />";
echo "<input type='hidden' name='email' value='$email' />";
echo "<input type='hidden' name='date' value='$date' />";
?>
<!-- attention, j'ai modifié la fonction, on passe en plus le nom du script appelé et l'id du div a ecrire en arguments à la fonction -->
<input type="button" value="Valider" onClick="submitForm('enregistrement.php','info',<?php echo "ok,".$prenom.",".$nom.",".$lieu.",".$tel_fixe.",".$tel_portable.",".$adresse.",".$email.",".$date; ?>);" />
<?php
echo "</form>";
echo "</div>";
}
}
?>

<div id="info"></div>
</body>
</html>


              et enregistrement.php: 

              <?php
//script enregistrement.php appelé par la fonction Ajax
if (isset($_POST['valide']) && $_POST['valide']=="ok"){
	$prenom=$_POST['prenom'];
	$nom=$_POST['nom'];
	$lieu=$_POST['lieu'];
	$tel_fixe=$_POST['tel_fixe'];
	$tel_portable=$_POST['tel_portable'];
	$adresse=$_POST['adresse'];
	$email=$_POST['email'];
	$date=$_POST['date'];
	mysql_connect("localhost", "root", "");
	mysql_select_db("carnet_adresse");
	$query="INSERT INTO carnet VALUES ('', '".$prenom."','".$nom."','".$lieu."','".$tel_fixe."','".$tel_portable."','".$adresse."','".$email."','".$date.")";
	$requette=mysql_query($query);
	//en fonction du resultat de la requette à la base on envoie la réponse à la fonction Ajax
	if($requette){
		echo "Enregistrement r&eacute;ussi !";
	}else{
		echo "L'enregistrement a &eacute;chou&eacute; !";
	}
	mysql_close();
}
//attention si il clique plusieures fois sur le bouton tu vas avoir autant d'enregistrements, donc dans ce script il faut peut être vérifier que tu n'a pas déja cette personne avnat d'enregistrer ??
?>


              PS: je suis à nouveau absent à partir de demain matin.
          8. vct
            Hello,

            Merci alain pour la petite correction j'avais pas fait attention.
            Le problème persiste.

            Si ça peut aider, quand je clic sur le bouton ma div info initialement comme cela :
            <div id='info'></div>

            ...ne se rempli même pas par un message que j'ai défini dans le javascript :
            document.getElementById('info').innerHTML="ok! <a href='index.php'>back</a>";
            else
            document.getElementById('info').innerHTML="Error code " + xhr.status;

            Tous ces efforts pour apprendre l'ajax c'est dingue.

            a+ vct
            1. Alain_42
              c'est sur l'Ajax ce n'est pas simple.

              xhr.open("POST", "nouvelle-personne.php", true);

              quel est le code du script nouvelle-personne.php ?
          • 1
          • 2

          Discussions similaires

          java script error in the main process
          ceciel2307

          3 réponses
          Cette application ne peut pas s'exécuter sur votre pc
          Mornvor

          14 réponses
          Javascript Arrondi à 2 chiffres après la virgule
          jeremy

          14 réponses
          Erreur de requête
          David

          7 réponses
          a javascript error occurred in the main process
          Kytsu1241

          1 réponse