[PHP/JS]Envoyer contenu d'une cellule via XMLHttpRequest

Envoyer contenu d'une cellule via XMLHttpRequest [PHP/JS] - HTML/CSS - Programmation

Marsh Posté le 25-07-2013 à 09:45:08    

Bonjour,
 
Voilà j'aimerai pouvoir poster le contenu d'une cellule d'un tableau php vers une autre page php, la solution se tournerai vers XMLHttpRequest mais je ne vois pas comment l'utiliser. J'ai un annuaire lorsque que je clique sur une cellule en particulier, le contenu de la cellule sur laquelle on a cliqué est posté puis l'utilisateur va être rediriger vers la page php correspondante(identity.php) qui va utilisé le contenu de cette cellule pour son exécution(l’exécution d'une requête SQL va prendre comme argument le POST effectué) . On a 2 fichiers, annuaire.php et identity.php, je vais mettre les parties de code concernés :
 
Annuaire.php :
partie JS

Code :
  1. <script type='text/javascript'>
  2.  //Creation Objet AJAX pour transmission de données
  3.   function getXhr()
  4.   {
  5.    var xhr = null;
  6.    if(window.XMLHttpRequest) //firefox
  7.     xhr = new XMLHttpRequest();
  8.    else if(window.ActiveXObject)
  9.    {
  10.     try{
  11.      xhr = new ActiveXObject("Msxml2.XMLHTTP" );
  12.      } catch (e) {
  13.       xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  14.      }
  15.    }
  17.    else{
  18.    alert("error" );
  19.    xhr = false;
  20.    }
  21.    return xhr;
  22.   }
  24.   /* Appel de la methode lors de la selection */
  26.   function sendToIdentity()
  27.   {
  28.    var xhr = getXhr();
  29.    //creation d'une fonction qui s'executera à chaque changement d'etat
  30.    xhr.onreadystatechange = function()
  31.    {
  32.     //readyState = Etat de l'objet utilisé exemple 4 => Prêt | status = Code réponse du serveur exemple 200 => OK
  33.     if(xhr.readyState == 4 && xhr.status == 200)
  34.     {
  35.      //reponse retournée par le serveur au format texte
  36.      leselect = xhr.responseText;
  37.      //creation d'un objet html  
  38.      document.getElementById('code').innerHTML = leselect;
  39.      var code = document.getElementById('code').innerHTML;
  40.     }
  41.    }
  43.    xhr.open("POST","identity.php",true);
  45.    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  48.    //alert(code); //verif que la bonne valeur est stockée
  51.    xhr.send(code);
  53.   }


 
Partie PHP :
 

Code :
  1. while($data=mysql_fetch_assoc($req))
  2.       {
  5.        echo '<tr align="center">';
  6.        echo '<td class="othVar">' . $data['nom'] . '</td>';
  7.        echo '<td class="othVar">' . $data['prenom'] . '</td>';
  9.        echo '<td class="othVar" id = "code" onclick="sendToIdentity('. $data['code'] .');">' . $data['code'] . '</td>';  //je veux poster $data['code']  
  10. }


 
 
identity.php ( qui va utiliser la variable qui a été posté ) :
 

Code :
  1. $requete = ("SELECT code,nom,prenom,activite
  2.     FROM personne
  3.     WHERE  code = ".$_POST['code']."" );


 
Voilà, j’espère avoir bien expliqué, merci et bonne journée :)

Reply

Marsh Posté le 25-07-2013 à 09:45:08   

Reply

Marsh Posté le 25-07-2013 à 11:08:18    

Oula, si tu protèges pas ton $_POST['code'] dans ta requête SQL, tu t'exposes à des piratages...
 
En moins grave tu a un ID code pour tous tes td, or les id doivent être unique au sein de ta page.
 
ligne 9 du code php je ferais plutôt un truc du genre :

Code :
  1. echo '<td class="othVar" id = "id_'. $data['code'] .'" onclick="sendToIdentity(this);">' . $data['code'] . '</td>';


 
et ta fonction JS :

Code :
  1. function sendToIdentity(DOM)
  2.   {
  3.    var data = DOM.getAttribute('id').split('_')[1];
  4.    var xhr = getXhr();
  5.    //creation d'une fonction qui s'executera à chaque changement d'etat
  6.    xhr.onreadystatechange = function()
  7.    {
  8.     //readyState = Etat de l'objet utilisé exemple 4 => Prêt | status = Code réponse du serveur exemple 200 => OK
  9.     if(xhr.readyState == 4 && xhr.status == 200)
  10.     {
  11.      //reponse retournée par le serveur au format texte
  12.      leselect = xhr.responseText;
  13.      //creation d'un objet html   
  14.      this.innerHTML = leselect;
  15.     }
  16.    }
  17.    xhr.open("POST","identity.php",true);
  18.    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  19.    //alert(code); //verif que la bonne valeur est stockée
  20.    xhr.send(data);
  21.   }


 
Vu ton niveau, tu devrais t'orienter vers une bibliotheque javascript (mootools ou jquery) qui te simplifieront énormément la vie, y compris pour la compatibilité entre les navigateurs...


---------------
D3
Reply

Marsh Posté le 25-07-2013 à 13:56:12    

Salut mechkurt,
 
Encore merci pour l'aide :)
 
Je constate que le POST est bel est bien effectué, pourrais-tu m'éclairer sur la partie de l'ouverture automatique de la page identity lors de l'envoie du POST? Si on utilise window.open() en complément de xhr.send() (...).
 

Citation :

Oula, si tu protèges pas ton $_POST['code'] dans ta requête SQL, tu t'exposes à des piratages...


 
Je suppose que tu parle des injections SQL (mysql_real_escape_string()), oui je vais mettre par les suite les contrôles(...) pour le moment je fais le coté fonctionnel :)
 

Citation :

Vu ton niveau, tu devrais t'orienter vers une bibliothèque javascript (mootools ou jquery) qui te simplifieront énormément la vie,


 
Oui, je sais j'apprends sur le tas ^^ mais je cherche à comprendre un maximum de chose et comme je ne touche au JS que depuis 3semaines, j'enchaine des cours et exercices .  
 

Citation :

y compris pour la compatibilité entre les navigateurs...


J'avoue que je cherchais à résoudre le problème sous IE avec les InnerHTML. Je ne savais pas que Jquery avait une méthode adapté déjà toute faite. J'étais partis sur les méthodes DOM lol  :pt1cable:


Message édité par furil le 25-07-2013 à 14:01:25
Reply

Marsh Posté le 25-07-2013 à 14:06:56    

Nan mais si ton but c'est d'ouvrir une nouvelle fenetre, pourquoi faire un Ajax (qui sert à récupérer du contenu pour mettre à jour ta page actuelle sans la recharger) !?


---------------
D3
Reply

Marsh Posté le 25-07-2013 à 14:14:40    

Arf alors j'ai mal compris le fonctionnement  :sweat:  
 
Voilà j'avais utilisé cette même méthode pour faire communiquer plusieurs fichiers PHP entre eux afin d'alimenter des listes déroulantes liées. Je me suis dit que ça reviendrais au même, si cette fois c'était une cellule d'un tableau. C'est juste que je ne voyais pas d'autre solutions pour l'envoie du contenu de la cellule d'un fichier vers un autre vu que ce sont pas des formulaires :/  
 

Reply

Marsh Posté le 25-07-2013 à 14:17:23    

Ben tu l'envoi dans l'url /ma-page.php?data=toto(en GET quoi) et tu récupères ta valeur dans PHP avec $_GET['data'] !
 
 [:al zheimer]


---------------
D3
Reply

Marsh Posté le 25-07-2013 à 14:25:50    

xhr.send(data);
windows.open("identity.php?="+data);
 
Comme ça, ça devrait fonctionner aussi non? après il y aura plus qu'à adapter le fichier cible lors de la recup de la variable.


Message édité par furil le 25-07-2013 à 14:26:20
Reply

Marsh Posté le 25-07-2013 à 15:17:18    

Mais encore une fois pourquoi faire du javascript pour faire ce qu'on peut faire avec des liens basique en html ?
 
window.open ouvrira une pop-up.
 
window.location.href redirigera la fenêtre...
 
...tout comme un bête <a href="/monurl">mon lien</a> le ferait !


---------------
D3
Reply

Marsh Posté le 25-07-2013 à 16:15:25    

je viens de piger, j'ai envie de me tirer une balle ...  :pfff:  
 
Je me complique la vie pour rien ...  :pfff:  
 
Merci


Message édité par furil le 25-07-2013 à 16:16:01
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed