Récupérer variable php dans Javascript

Discutez d'informatique ici !
Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Récupérer variable php dans Javascript

par Rockleader » 21 Jan 2016, 20:34

Tout est dans le titre, j'ai écumé tous les tutos possible, mais je n'arrive pas à m'en sortir.

Partout la solution
Code: Tout sélectionner
var wait="<?php echo $wait ?>";


semble être mise en avant.

Sauf que, ça ne marche pas si le code est séparé dans un fichier js.

Donc cette solution ne marche pas !

Du coup, il ne me reste plus qu'à savoir comment récupérer une variable php dans javascript avec AJAX.

Et là, je bloque, tous les cours sur le net parle de variable dans des formulaires pour ça il y a des tonnes d'exemple...sauf que là je veux simplement récupérer le contenu d'une variable php simple. Impossible de trouver comment faire...

Je dois être stupide, mais j'ai pas réussi à voir comment faire, un exemple serait le bienvenue...
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !



Avatar de l’utilisateur
ampholyte
Membre Transcendant
Messages: 3940
Enregistré le: 21 Juil 2012, 09:03

Re: Récupérer variable php dans Javascript

par ampholyte » 22 Jan 2016, 18:13

Bonjour,

J'ai un peu de mal à piger ce que tu cherches faire. Pourrais-tu détailler un peu ce que tu cherches à faire ?

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 22 Jan 2016, 18:59

En admettant que j'ai un fichier php (je passe les prototypes html)

Code: Tout sélectionner
<body>
<p> du blabla</p>
<php
      $wait=true;
?>
<script>var waitJS=<php echo $wait;?>;
alert(waitJS);
</script>

</body>


Dans ce cas là l'affichage du alert va se faire car le javascript est dans la page php.

Moi ce que j'aimerais faire c'est enlever le code js du fichier php et le déclencher depuis une fonction d'un fichier js.
Et là ça ne fonctionne plus car j'imagine que si je met var waitJS=<php echo $wait;?>; dans un javascript il ne peut pas rappeler le serveur pour php.

C'est pour cela que je dis que cette méthode ne peut pas marcher (enfin si j'ai un peu compris le fonctionnement global de js et php).




===========================================

Dans la pratique, si je veux faire ça, c'est pour tester les bases d'ajax, car j'ai l'impression d'avoir un code correct, mais je ne sais pas si ça fonctionne ou non.


Exemple

test.js

Code: Tout sélectionner
function testAj(){
      var xhr = new XMLHttpRequest();
      var url = "test.php?waiting=false";
      xhr.open("GET", url);
      xhr.send(null);
}

function startTimer(obj){
   setInterval(testAj,5000);
}


Si j'ai compris ce que j'ai fais, toutes les 5 secondes je lance une requête ajax avec la méthode get sur l'url demandé.


Ma page test.php

Code: Tout sélectionner
<html>
    <head>
        <title>TEST</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="./test.js"> </script>
    </head>
    <body>
         <table id="ZoneCombat">
            <tr>
               <td id="e0" onclick='startTimer(this)'></td>
            </tr>
         </table>
         <?php
            if(isset($_GET['waiting'])){
               $wait="OK";
            }else{
               $wait="KO";
            }
             echo $wait ;
          ?>
    </body>

<html>


Sur cette page php, lorsque je la lance, elle m'affiche KO, ce qui est tout à fait normal me direz vous.
Par la suite, en cliquant sur la cellule de tableau, je m'attends à ce que le script se lance.
Et donc que je reçoive une requête ajax faisant que la valeur de $wait vaudra OK.

Sauf que, au niveau de mon url dans la barre d'adresse je ne vois pas de changement.
Du coup, je me dis comme le principe d'ajax est de ne pas recharger la page, c'est peut être normal.

Du coup, pour savoir si oui ou non ça marche, j'aimerais récupérer la valeur de $wait après l'exécution du script.
Car à l'heure actuelle sur ma page, KO reste toujours affiché, ne connaissant pas ajax plus que ça je ne sais pas si c'est normal ou non, j'essaie pour cela de faire des exemples assez simple pour voir comment ça fonctionne.


En espérant avoir un peu mieux détaillé ma façon de procéder.


PS: Merci de l'intérêt que tu as apporté à ce topic, je commençais à désespérer d'avoir des réponses me disant d'aller lire le tutos sur ajax du sdz...alors que j'ai du le lire trois ou quatre fois en entier dans la semaine sans trouver de solution à mon problème...tout simplement parce que lorsqu'on bloque sur une base, c'est impossible de s'investir plus en avant dans la compréhension d'un langage, chose que certains ne comprennent pas. Ou alors c'est juste moi qui suit un abruti fini pour ne pas comprendre. Ou alors les gens qui savent utilisé ajax forme un groupe sectaire en mode illuminati et refusant de partager leur connaissances à quiconque n'est pas capable d'arriver à leur niveau sans aide 8| (Oui j'en suis à voir des complots :lol: )
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

Avatar de l’utilisateur
ampholyte
Membre Transcendant
Messages: 3940
Enregistré le: 21 Juil 2012, 09:03

Re: Récupérer variable php dans Javascript

par ampholyte » 23 Jan 2016, 01:10

Il te faut simplement rajouter une fonction de callback sur le retour de ton appel ajax.

Code: Tout sélectionner
var xhr = new XMLHttpRequest();
      var url = "test.php?waiting=false";

xhttp.onreadystatechange = function() {
   if (xhttp.readyState == 4 && xhttp.status == 200) {
       alert("Fin de l'appel ajax");
   }

xhr.open("GET", url);
xhr.send(null);


Pour faire simple quand l'execution de test.php?waiting=false aura terminé de s'executer, et que tu indiqueras dans ce script le code retour 200, alors le alert s'executera.

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 23 Jan 2016, 01:21

D'accord je teste ça dès demain.

Mais en parallèle est-ce normal que je ne vois pas de modification sur la page php ?

Avec le code que j'avais, je ne voyais jamais l'url test.php?waiting=false dans ma barre d'adresse; et je ne voyais pas non plus de modification d'affichage dans le php.
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

Avatar de l’utilisateur
ampholyte
Membre Transcendant
Messages: 3940
Enregistré le: 21 Juil 2012, 09:03

Re: Récupérer variable php dans Javascript

par ampholyte » 23 Jan 2016, 16:48

En ajax c'est tout à fait normal, les requêtes ajax te permettent de modifier le contenu HTML sans recharger la page.

Si tu veux voir les requetes, je te propose d'utiliser un débogueur sur ton navigateur (firebug par exemple pour firefox) et d'aller dans l'onglet réseau. Tu pourras ainsi vérifier toutes les requêtes qui sont envoyées et donc bien vérifier l'envoi de ta requête.

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 23 Jan 2016, 17:08

Ah d'accord, en fait, je pensais (pour la suite de mon projet) utiliser des requêtes ajax pour permettre à deux users d'écrire dans un même fichier et ainsi simuler une connexion entre les deux étant donné que ne ne peux pas installer peerJs ou nodeJs.

Sa je vais donc pouvoir le faire avec Ajax.

Mais je pensais également que je pourrais rafraîchir l'affichage simplement avec Ajax.

Si je ne peux pas, il va falloir que je réfléchisse autrement. Afin de pouvoir rafraîchir ma page de jeu tout en restant sur cette même page.

==========================================

J'avais prévu:

1- Requete AJAX pour stocker nos données de jeu dans un fichier
2- Requete AJAX pour lire les données de jeu de l'adversaire dans le même fichier
3- Modifier dynamiquement mon affichage en fonction des données récupéré.



Si je voulais pouvoir récupérer les données variable de php dans le js, c'est aussi pour arriver à mettre à jour dynamiquement mon contenu avec le Js.

Pour écrire, je n'ai pas besoin de récupérer les données.
Mais lorsque je lis les données après en envoyant la requête ajax, il faut bien que je les récupère pour pouvoir les intégrer à mon tableau js et modifier mon affichage.


EDIT: J'ai utilisé la console de chrome, et j'ai bien vu que des appels à la page se faisaient, mais je n'étais pas sûr que ça fonctionnait comme je ne voyais pas de changement sur ma page justement. Mais là, tu me dis que c'est normal que les changements d'affichage ne s'opère pas. Donc au moins ça me permet de savoir que ma requête ajax s'effectue.

Du coup, j'ai encore un peu de mal à comprendre; la page n'est pas rechargé, mais le code est bien traité par le serveur ?

C'est à dire, pour reprendre mon exemple
Code: Tout sélectionner
if(isset($_GET['waiting'])){
      echo "OK";
}else{
      echo "KO"
}


KO sera toujours affiché, mais durant l'appel d'ajax, le code echo "OK" est quand même exécuté par le serveur ? Il n'est simplement pas "mis à jour" sur la page en question ?

Et donc, si je remplace mon echo "OK" par une fonction qui va écrire dans un fichier sur mon serveur, alors ça devrait fonctionner sans problème.
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

Avatar de l’utilisateur
ampholyte
Membre Transcendant
Messages: 3940
Enregistré le: 21 Juil 2012, 09:03

Re: Récupérer variable php dans Javascript

par ampholyte » 25 Jan 2016, 11:14

Rockleader a écrit:Ah d'accord, en fait, je pensais (pour la suite de mon projet) utiliser des requêtes ajax pour permettre à deux users d'écrire dans un même fichier et ainsi simuler une connexion entre les deux étant donné que ne ne peux pas installer peerJs ou nodeJs.


Tu peux faire ça mais il faudra que tu fasses attention que les 2 users n'écrivent pas au même moment dans le fichier, tu risques dans le cas contraire d'avoir des surprises ^^.

Rockleader a écrit:Mais je pensais également que je pourrais rafraîchir l'affichage simplement avec Ajax.

Si je ne peux pas, il va falloir que je réfléchisse autrement. Afin de pouvoir rafraîchir ma page de jeu tout en restant sur cette même page.


Bien sûr que tu peux rafraichir l'affichage de ta page. Voici un exemple pour récupérer le contenu html (ou autre suivant ce que tu renvoies)

Code: Tout sélectionner
function ajax_send() {
   req = new XMLHttpRequest(); // Je passe l'ensemble des tests pour déterminer le navigateur pour simplifier
   req.open("GET", "test.php?waiting=false", true);
   req.onreadystatechange = function() {callback(req);};
   req.setRequestHeader("Content-type", "text/html;charset=utf-8");
   req.send(null);
}

function callback(req) {
     if (req.readyState == 4 && req.status == 200) {
          alert(req.responseText); // Ici tu vas récupérer ce que ta page php va renvoyer

          // Il te suffit donc de modifier ce que tu souhaites par la suite. Exemple :
          document.getElementById("reponseajax").innerHTML = req.responseText;
          // Ici la div d'id reponseajax, contiendra ce que renvoie le php

          // Si tu souhaites reload ta page sur un OK
          if (req.responseText === "OK") {
              location.reload();
          }
     }
}


Rockleader a écrit:J'avais prévu:

1- Requete AJAX pour stocker nos données de jeu dans un fichier
2- Requete AJAX pour lire les données de jeu de l'adversaire dans le même fichier
3- Modifier dynamiquement mon affichage en fonction des données récupéré.

Si je voulais pouvoir récupérer les données variable de php dans le js, c'est aussi pour arriver à mettre à jour dynamiquement mon contenu avec le Js.



Peut-être que ce qui serait plus simple serait de passer par un format json. Cela te permettrait de renvoyer les variables php que tu souhaites à ton client.

Pour ce faire, je te renvoie vers ceci (ce n'est vraiment pas compliqué à comprendre et à mettre en place) :
http://www.xul.fr/ajax-format-json.html (pour le côté client)
http://www.tutorialspoint.com/json/json_php_example.htm (côté serveur).

Rockleader a écrit:Pour écrire, je n'ai pas besoin de récupérer les données.
Mais lorsque je lis les données après en envoyant la requête ajax, il faut bien que je les récupère pour pouvoir les intégrer à mon tableau js et modifier mon affichage.

Le json me semble être une bonne solution à ce problème là =).

Après rien ne t'empèche de gérer la lecture ou l'écriture avec 2 appels ajax différents vers 2 fichiers différents.

Rockleader a écrit:EDIT: J'ai utilisé la console de chrome, et j'ai bien vu que des appels à la page se faisaient, mais je n'étais pas sûr que ça fonctionnait comme je ne voyais pas de changement sur ma page justement. Mais là, tu me dis que c'est normal que les changements d'affichage ne s'opère pas. Donc au moins ça me permet de savoir que ma requête ajax s'effectue.


Normalement dans les onglets potentiels côté network, tu devrais pouvoir regarder le header (avec les paramètres envoyés) et la réponse du serveur (le html renvoyé donc ton OK ou NOK, ou alors le json, ou autre ...)

Rockleader a écrit:Du coup, j'ai encore un peu de mal à comprendre; la page n'est pas rechargé, mais le code est bien traité par le serveur ?

C'est à dire, pour reprendre mon exemple
Code: Tout sélectionner
if(isset($_GET['waiting'])){
      echo "OK";
}else{
      echo "KO"
}


KO sera toujours affiché, mais durant l'appel d'ajax, le code echo "OK" est quand même exécuté par le serveur ? Il n'est simplement pas "mis à jour" sur la page en question ?

Et donc, si je remplace mon echo "OK" par une fonction qui va écrire dans un fichier sur mon serveur, alors ça devrait fonctionner sans problème.


Pourquoi KO serait toujours affiché ? Si waiting est défini tu auras OK (si tu remplaces OK par une fonction qui écrit dans un fichier cela fonctionnera). Si ta variable waiting n'est pas définie tu auras NOK.

Avatar de l’utilisateur
fatal_error
Modérateur
Messages: 6610
Enregistré le: 22 Nov 2007, 14:00

Re: Récupérer variable php dans Javascript

par fatal_error » 25 Jan 2016, 14:29

variante par rapport au pb d'origine: au lieu de faire une req ajax, tu lis directement la valeur de la variable générée par php dans le dom.
Puis dans ton fichier js, tu lis le dom pour chercher ta variable.

ta page php: tu sers
Code: Tout sélectionner
<!doctype html>
...
<style type="text/css>#useless{display:none;}</style>
<p id="useless">
<!-- we serve a json globing our variables -->
<? echo '{"jsVariable":"'.$taVariable.'"}'?>
</p>


ton fichier.js
Code: Tout sélectionner
var str = document.getElementById('useless').innerHTML;
var phpVariables = JSON.parse(str);
console.log('got : ', phpVariables.jsVariable);
la vie est une fête :)

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 25 Jan 2016, 15:10

Bon, il va falloir que je recommence à tester pour mettre un peu d'ordre dans tout ça.

On m'a aussi proposé une solution qui je pense se rapproche un peu de la tienne fatal en utilisant des input caché.
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

syrac

Re: Récupérer variable php dans Javascript

par syrac » 29 Jan 2016, 21:04

@Rockleader

Les scripts php s'exécutent côté serveur, alors que le javascript s'exécute côté client (c'est-à-dire le navigateur). En faisant référence à ton second post, tu ne peux pas inclure du php dans un fichier Html (côté client), parce qu'il ne sera jamais exécuté ! Ta variable $wait est donc totalement inconnue du script js.

syrac

Re: Récupérer variable php dans Javascript

par syrac » 30 Jan 2016, 15:58

Rockleader a écrit:En admettant que j'ai un fichier php (je passe les prototypes html)

Code: Tout sélectionner
<body>
<p> du blabla</p>
<php
      $wait=true;
?>
<script>var waitJS=<php echo $wait;?>;
alert(waitJS);
</script>

</body>


Autant pour moi, j'aurais dû lire ton post plus attentivement. Si ton fichier html porte l'extension .php alors le problème vient du fait que javascript n'interprète pas les booléens de la même manière que php. Dans ce cas, voici comment donner à waitJS la même valeur booléenne que $wait :

Code: Tout sélectionner
<script>
    var temp = <?php echo $wait ? 1 : 0 ?>,
    waitJS = (temp == 1 ? true : false);
</script>


Mais le plus simple est encore de donner directement à $wait et waitJS la valeur 1 ou 0.

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 30 Jan 2016, 17:51

Salut,

J'ai opté pour la méthode AJAX qui a fonctionné sur mes exemples simples.

Je n'ai donc plus de problème théorique pour faire passer ma variable de php à Js. Reste la pratique, ça c'est une autre histoire :lol:
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

syrac

Re: Récupérer variable php dans Javascript

par syrac » 30 Jan 2016, 18:21

Rockleader a écrit:Reste la pratique, ça c'est une autre histoire :lol:

Qu'entends-tu par là ? Tu connais la plateforme javascript jQuery, qui gère les requêtes ajax d'une manière simplissime, via jQuery.post et jQuery.ajax (ou $.post et $.ajax). Voici tout ce qui concerne jQuery ajax.

PS : à l'attention de jb13, les liens seraient plus visibles s'ils étaient en bleu, et le code aussi si sa typo était légèrement plus foncée.

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 30 Jan 2016, 19:43

Pour la pratique je faisais référence à ce topic.

informatique/controler-une-table-sql-regulierement-depuis-php-t171299.html#p1132887

J'ai utilité le même script ajax qui avait fonctionné lorsque j'ai testé la dernière fois un affichage dynamique.
Sauf que là, je ne récupère plus la valeur.


Non je n'utilise pas jquerry, je débute avec js donc j'essaye de rester dans ce que je comprends pour le moment.

Beaucoup me disent que jquerry est plus simple, mon crédo perso c'est de ne pas utiliser une lib qui va faire des choses que je ne comprends pas.

Donc une fois que j'aurais maîtrisé js et ajax, alors peut être que je regarderais si je peux pas me simplifier la vie, mais pas pour le moment.
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

syrac

Re: Récupérer variable php dans Javascript

par syrac » 30 Jan 2016, 20:26

Rockleader a écrit:Beaucoup me disent que jquerry est plus simple, mon crédo perso c'est de ne pas utiliser une lib qui va faire des choses que je ne comprends pas.

Tu es tout à fait libre de tes choix, mais au sujet de la compréhension de ce que fait jQuery tu pourrais être intéressé par la page qui répertorie les sélecteurs qu'il utilise : http://www.w3schools.com/jquery/jquery_ ... ectors.asp

Voici un exemple tiré de l'api jQuery (http://api.jquery.com/. Tu tapes first dans le champ de recherche en haut à droite). L'exercice consiste à surligner en rouge le texte du premier élément de la liste (le premier <li>) :

Code: Tout sélectionner
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Code jQuery :
$("li").first().css("background-color", "red");

Toutes les listes de la page subiront le même traitement. Autre exemple, qui permet de ne surligner que le premier élément d'une liste précise :

Code: Tout sélectionner
<ul id="maListe">
  <li>list item 1</li>
  ...
  <li>list item 5</li>
</ul>

Code jQuery :
$("#maListe li:first").css("background-color", "red");

Je ne sais même pas comment on ferait en pur javascript, mais j'imagine que ce serait nettement plus complexe, et surtout plus verbeux. J'ai toujours utilisé jQuery, qui s'acquiert assez rapidement, mais d'un autre côté il est possible que commencer par apprendre à programmer en pur javascript soit une bonne chose. Bon courage quand même, parce que la bible de javascript, la référence en la matière, fait 1224 pages (http://eu.wiley.com/WileyCDA/WileyTitle ... 26912.html) ! :D

Enfin, l'intérêt d'utiliser jQuery est la garantie que le code fonctionnera dans tous les navigateurs et sur toutes les plateformes (Windows, Android, etc). Tous les cas particuliers dont tu dois tenir compte dans ton code javascript sont déjà intégrés à jQuery, tu n'as pas à t'en occuper.

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Récupérer variable php dans Javascript

par Rockleader » 30 Jan 2016, 21:17

C'est assez simple à faire en CSS pur, donc derrière le javascript fait que modifier le CSS.

Typiquement sur le css suffit d'aller modifier cette propriété

Code: Tout sélectionner
#menu-demo2 li:first-child{
background-color: #2D2D42;
background-image:-webkit-linear-gradient(top, #2D2D42 0%, #9F391A 100%);/*couleur progressive*/
background-image:linear-gradient(to bottom, #2D2D42 0%, #9F391A 100%);
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}


C'est des propriétés CSS et après libre à toi de les modifier, que ce soit par Js ou par Jquerry.

Puis en Js pour modifier le CSS c'est deux ligne. TU récupère l'id de l'élément et tu change dans son style la propriété que tu veux...Donc c'est vraiment une question de point de vue la facilité de jquerry.

Code: Tout sélectionner
var elm=document.getElementById(id_ch);
   elm.style.background="#808080";
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

syrac

Re: Récupérer variable php dans Javascript

par syrac » 30 Jan 2016, 21:22

Tout à fait, jQuery utilise la syntaxe css, c'est pourquoi il n'est pas difficile à apprendre.

L'exemple que j'ai cité était basique, mais avec une syntaxe relativement simple on peu accéder à n'importe quel élément du DOM et le modifier à sa guise. Le chainage est une particularité de jQuery, comme dans l'exemple du bouton qu'on passe du rouge au vert : $("#IdDuBouton").removeClass("rouge").addClass("vert"), ou encore plus simple, $("#IdDuBouton").toggleClass("rouge", "vert"), qui fonctionne dans les deux sens.

 

Retourner vers ϟ Informatique

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 14 invités

Tu pars déja ?



Fais toi aider gratuitement sur Maths-forum !

Créé un compte en 1 minute et pose ta question dans le forum ;-)
Inscription gratuite

Identification

Pas encore inscrit ?

Ou identifiez-vous :

Inscription gratuite