Récupérer variable php dans Javascript

**Amnael** · 21/01/2016, 19h34

Bonsoir, tout est dans le titre:

Comment récupérer une variable php dans mon javascript.

Le fichier php et javascript sont séparés; par conséquent, la solution consistant à faire ceci ne marche pas.

Code :

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

1
2
 
var wait="<?php echo $wait ?>";

Du coup, j'ai entendu dire que l'on pouvait faire ça avec AJAX.

J'ai lu tous les tutos que je pouvais sur AJAX; mais j'en suis arrivé au point où sans un exemple concret pour faire passer une variable php à Javascript je n'y arriverais pas.

Je dis bien php, et non le contenu d'un div html.

Quand je parle d'un exemple, je ne parle pas non plus de formulaire comme le montre tous les sites ou presque.

Bref, si dans test.php j'ai $wait=true comment je récupère la valeur dans test.js

Merci de l'aide que vous pourrez m'apporter, quelle quelle soit.

**NoSmoking** · 21/01/2016, 20h12

Bonjour,
à lire donc la démonstration faite par sekaijin dans cette discussion Insérer de PHP dans une variable JS.

Tu aurais pu tomber dessus avec un minimum de recherche !

**Amnael** · 21/01/2016, 21h06

Salut et merci pour la réponse, mais

- Soit je n'ai pas compris les propos énoncés

- Soit ce n'est pas ce que je recherche tout simplement...

Ce que je retiens majoritairement de cette démonstration c'est que: "tout code d'un langage donné doit être dans un fichier portant l'extension de son langage".

Je suis totalement d'accord avec ce principe.

Sauf que, si on reprend l'exemple donné dans cette démonstration, ce principe n'est justement pas appliqué...

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
 
<html>
  <head>
  <link type="text/javascript" href="billet.js" />
  <script>
    var data = <?php echo json_encode($phpData);?>;
  </script>
  <title></title>
  </head>
  <body>
    <?php
    foreach ($phpData as $id => $donnees){
    {
    ?><div class="news">
        <h3><?php echo htmlspecialchars($donnees['titre']); ?> le <?php echo $donnees['date_creation_fr']; ?></h3>
        <p><?php echo nl2br(htmlspecialchars($donnees['contenu'])); ?><br>
        <a href="">Modifier</a> |
        <a href="#" onclick="confirmation(<?php echo $id;?>)">Suppression</a> | 
        <a href="commentaires.php?id=<?php echo $id;?>">Voir les commentaires</a></p>
    </div>
        <?php
    } //Fin du foreach
    ?>Nombre de billets affich&eacute;s: <?php echo $count; ?> sur <?php echo $total; ?>
  </body>
</html>

On a un joyeux mélange de html / php / javascript dans un même fichier !!!

Effectivement, si dans un fichier qu'il soit php ou autre, je fais figurer ceci

Code :

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

 var data = <?php echo json_encode($phpData);?>;

Cela va marcher, nous sommes d'accord (bien que je ne sache pas ce que fait la fonction json_encode()

Mais justement, je ne veux pas avoir de code js quel qu'il soit dans mon fichier php !

Pour être plus clair,

si j'ai un fichier test.php

Code :

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

1
2
3
<?php
    $wait=true;
?>

Je veux récupérer dans un fichier test.js le contenu de $wait; et cela sans modifier le fichier php ou en tout cas si je le modifie c'est pas pour ajouter du javascript dans le fichier, autrement, autant je ne vois pas l'intérêt de séparer le code en différent module comme l'explique cette démonstration.

En espérant avoir mieux exprimer le problème...

**Amnael** · 22/01/2016, 13h03

Toujours bloqué sur ce problème, je n'en vois décidément pas le bout...un exemple ciblé me serait vraiment d'un grand secours.
Je veux arriver à récupérer ce genre de variable pour étudier de plus près le comportement des requêtes ajax que je vais faire et faciliter le repérage de bug. Sauf que si je n'arrive pas à récupérer la variable, je suis coincé...

**progdebutant** · 22/01/2016, 22h25

Salut, et si tu envoies ta variable php dans un input "text" caché, tu pourrais le récupérer avec javaScript j'imagine ?

Ou dans un cookie à la rigueur ?

**Eric2a** · 22/01/2016, 23h19

Salut,

Si la ligne var wait="<?php echo $wait ?>"; se trouve dans un fichier avec l'extension .js, le code PHP s'y trouvant ne sera pas interprété.

À moins que le serveur est configuré (via le fichier .htaccess) pour que le fichier JS soit traité comme un fichier PHP.

Est-ce le cas ?

**Amnael** · 23/01/2016, 12h09

Aucune idée, c'est sur un serveur mutualisé (Olympe) et donc gratuit. Donc je ne suis pas sûr de ce qui est installé ou non.
Une chose est sure, nodeJs n'y ait pas, sinon ça me simplifierait bien la vie ahah =)

Donc en effet, le code ne sera pas interprété, du coup, comment la récupère on cette variable ? Il doit bien y avoir une solution.

Pour le cookie non, ce n'est pas une option, ce n'est pas du tout adapté à ce que je veux faire.

Faire un input caché; mouais pourquoi pas, mais ça ne me semble pas très propre s'il existe une autre solution ?

Sachant que dans cet exemple j'ai mis une variable statique, mais dans la pratique, la variable devrait être dynamique et changer de valeur en fonction des appels ajax.

**progdebutant** · 24/01/2016, 13h04

J'ai lu quelque part qu'on pouvait passer par URL une variable d'une page à une autre, est-ce que ça peut servir ?

**Amnael** · 24/01/2016, 13h26

Tu peux passer une variable par la méthode GET ou POST à une page php, mais là c'est au javascript que je voudrais communiquer la variable.

L'autre solution serait de rafraîchir la page en prenant en compte la variable dès le départ; mais je ne peux pas forcer l'utilisateur à cliquer sur un bouton toutes les 5 secondes après chaque appel AJAX par mon Js...

**progdebutant** · 24/01/2016, 17h03

Pour le moment la seule solution pratique c'est le input caché...même si ça fait pas puriste

Code :

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

<input type="hidden" id="passvar" name="passvar"  value= <?php echo $mavariable ?> />

Et dans le javascript :

Code :

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

var mavariable=document.getElementById("passvar").value;

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

Et si tu déclarais ta variable comme ça dans le javaScript, ça passerait ? (plus puriste ?)

Code :

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

var mavariable = '<?php echo $mavariable; ?>' ;

**Amnael** · 24/01/2016, 18h35

Et si tu déclarais ta variable comme ça dans le javaScript, ça passerait ? (plus puriste ?)

Code :

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

var mavariable = '<?php echo $mavariable; ?>' ;

Cela marche seulement si le script est dans la page php (ce que je trouve vraiment pas propre pour ma part).

Je pense donc que je vais adopter cette méthode là pour l'instant, même si faire passer un tableau de 100 cases de cette façon risque d’être bien lourd =)

Enfin à savoir si en étant hidden ils prennent quand même de la place sur la page, sinon en plus il faudra que j'aille minimiser la taille via le css, à la fin ça ferait vraiment un truc pas très propre^^

**ABCIWEB** · 24/01/2016, 19h32

Effectivement un input caché (ou même un div) dans lequel on affiche la variable php permet d'avoir un fichier js indépendant. C'est plus logique qu'une variable js soit dépendante du contenu d'un élément html sur lequel il travaille plutôt que défini par une variable php.

Evidemment au final cela revient au même dans le sens où il faudra bien afficher cette variable php quelque part dans la page.

L'autre alternative est de faire une requête ajax onload pour ramener un tableau php créé avec json_encode. C'est moins rapide puisqu'il faudra une requête supplémentaire mais pratique pour des fonctionnalités qui ne sont pas indispensables à l'affichage initial de la page.

**progdebutant** · 24/01/2016, 19h35

J'ai pas compris si t'allais faire ça :

Code :

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

var mavariable = '<?php echo $mavariable; ?>' ;

Ou si tu allais faire l'input caché.

Si tu fais le système de l'input moi j'ajouterais display:"none" à l'input qui est "hidden", comme ça y aura plus de chance qu'il prenne pas de place sur la page.

**Amnael** · 24/01/2016, 19h41

Je ferais avec l'input, le seul petit problème c'est qu'en fait je vais devoir faire non pas un input mais 100 input =)

Enfin c'est pas bien grave non plus =)

Il me faut juste vérifier si je peux remonter la variable d'un input caché dont le value serait modifié dynamiquement par une requête ajax faite au préalable. Si je peux faire ça, alors je pense que je devrais pouvoir me démerder.

**ABCIWEB** · 24/01/2016, 20h06

Bah, si tu fais une requête ajax, pourquoi ne pas te servir du résultat directement.

Et sans requête ajax pourquoi aurais-tu besoin de 100 input ? Pourquoi ne pas tout mettre dans un tableau ?

**Amnael** · 24/01/2016, 20h21

J'ai encore un peu de mal à cerner comment se servir du résultat d'une requête ajax, dans le sens où je n'ai pas forcement un résultat.

Si ma requete ajax, fait un appel à la page test.php avec un attribut wait

Dans test.php si j'ai

Code :

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

1
2
3
4
5
if(isset($_GET['wait'])){
   $var="OK";
}else{
   $var="KO";
}

Ici, la requête ajax aurait simplement donné une valeur différente à une variable, il n'y a pas vraiment de retour à la requete ajax ou quoi que ce soit d'autre.

**ABCIWEB** · 24/01/2016, 21h02

Code :

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

1
2
3
4
5
if(isset($_GET['wait'])){
   $var="OK";
}else{
   $var="OK";
}

Bah oui si tu veux tu peux toujours faire du code qui sert à rien, mais c'est pas une obligation.

Une requête ajax peut retourner quelque chose ou rien suivant ce que tu lui demande de faire, c'est suivant tes besoins.

**Amnael** · 24/01/2016, 21h10

Du coup, comment on peut déterminer ce que la requête AJAX doit nous renvoyer ?

Sur l'exemple que j'ai montré, si je ne me trompe pas elle ne renverra rien, mais si j'avais voulu renvoyer quelque chose. L'élément de retour est déterminé par AJAX lui même, ou je peux lui imposer de me retourner ce que je veux qu'il me retourne ?

Désolé, je suis vraiment novice sur le concept d'ajax.

EDIT: Sur le code précédent, il y a une erreur de frappe, je voulais mettre une à "OK" et l'autre à "KO". J'édite.

**ABCIWEB** · 24/01/2016, 21h23

Pour donner un exemle avec php, la requête ajax ne retournera rien tant que tu n'auras pas fait un echo dans le script côté serveur (destination de la requête ajax).

Si tu fais un echo sur une chaine de caractère tu auras une chaine de caractère, si tu veux passer un tableau il faut utiliser json_encode()

Faudrait faire des tutos ajax pour y voir plus clair. Il y en a un ici en javascript vanilla (pour dire sans lib).
Perso comme j'utilise jquery également pour d'autres scripts je préfère donc me simplifier la vie et utiliser jquery. Dans ce cas la doc est ici.

**Eric2a** · 24/01/2016, 23h26

Teste cette page (test.html) pour te familiariser avec AJAX

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
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Test</title>
</head>
<body>
	<div id="result"></div>
	<script type="text/javascript">
        function getValue(){
                var xhr=(function(){
                        if(window.XMLHttpRequest)
                                xhr=new XMLHttpRequest();
                        else if(window.ActiveXObject){
                                try{
                                        xhr=new ActiveXObject("Msxml2.XMLHTTP");
                                }catch(e){
                                        xhr=new ActiveXObject("Microsoft.XMLHTTP");
                                }
                        }else{
                                xhr=false;
                        }
                        return xhr;
                })();
 
                if(!xhr)return null;
 
                xhr.open('GET','test.php',false);
                xhr.send(null);
                return(xhr.readyState==4&& xhr.status==200)?xhr.responseText:null;
        };
 
        var wait=getValue();
 
        // Afficher résultat
        if(wait==null)wait='Ouups ! Une erreur est survenue';
        document.getElementById('result').appendChild( document.createTextNode(wait) ) ;
        </script>
</body>
</html>

En prenant soin de faire un echo 'quelque chose'; dans le fichier test.php

Récupérer variable php dans Javascript

JavaScript

Discussions similaires

Partager

Partager