Le Web du 34

Passer une variable de PHP à JavaScript

La méthode la plus simple consiste à afficher grâce à PHP la valeur de la variable directement dans le code JavaScript. Il s’agit de la méthode la plus directe. La fonction json_encode permet alors d’éviter des injections avec par exemple du code malveillant inséré depuis PHP. Il peut également être difficile de se retrouver dans son code quand on insère des données structurées (JSON, HTML) et parce que les deux langages sont mélangés.

Exemple :

<script>
             var variableRecuperee = <?php echo json_encode($variableAPasser); ?>;
            </script>

La méthode suivante consiste à afficher la variable PHP dans le HTML. Par exemple, dans un <input> caché ou dans une <div> puis dans le code JavaScript servant à récupérer la valeur en utilisant le DOM. Avec cette méthode, l’exécution du code est très rapide en JavaScript, car les opérations faites avec le DOM sont courtes. Cette méthode oblige cependant le code à être valide en HTML pour que cela fonctionne, sinon il faut échapper ou encoder les caractères posant problème.  
Le code HTML est aussi plus long en conséquence.

Exemple :

<!-- HTML -->
            <input type=hidden id=variableAPasser value=<?php eco $variableAPasser; ?>/>
            //JavaScript
            var variableRecuperee = document.getElementById(variableAPasser).value;

Une autre solution est d’utiliser AJAX. Le code JavaScript va envoyer une requête AJAX à un script PHP qui affichera la valeur. Grâce à l’événement onLoad qui est appelé lors du chargement du script PHP, on peut récupérer la valeur dans le code JavaScript. C’est la méthode la plus propre, car les langages sont alors bien séparés. Elle permet également de charger plus vite la page, car l’appel du script PHP peut être effectué dans un deuxième temps (par exemple, lors d’un clic sur un bouton). Le code écrit est par contre plus difficile à comprendre pour un débutant, et cela génère plus de latence dans la page (le code doit attendre que le JavaScript ait appelé la fonction PHP).

Exemple :

//Fichier PHP script.php
            <?php
            echo $variableAPasser;
            ?>
            //Code JavaScript
            var requete = new XMLHttpRequest();
            requete.onload = function() {
             //La variable à passer est alors contenue dans l’objet response et l’attribut responseText.
             var variableARecuperee = this.responseText;
            };
            requete.open(get, script.php, true); //True pour que l’exécution du script continue pendant le chargement, false pour attendre.
            requete.send();

La dernière méthode consiste à utiliser les cookies. PHP et JavaScript ont tous deux des méthodes pour créer et lire des cookies. La méthode est rapide et facile à mettre en place en PHP, mais demande un petit peu plus de traitement en JavaScript. Les deux langages sont bien séparés également avec cette méthode.

Exemple :

//PHP
            setcookie(MonCookie, $variableAPasser);
            //JavaScript
            //Ce bout de code permet de trier les cookies pour les stocker dans un tableau associatif.
            var cookies = document.cookie.split(;).
            map(function(el){ return el.split(=); }).
            reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
            //Récupération de la variable dans le tableau
            var variableRecuperee = cookies[MonCookie];

Passer une variable JavaScript à PHP

JavaScript est le langage côté client et PHP est le langage de script côté serveur. Dans ce tutoriel nous allons découvrir comment passer une variable de JavaScript à PHP via une requête HTTP.

Vous pouvez créer une URL de manière dynamique via JavaScript et l’envoyer au serveur via un appel AJAX (comme la méthode .ajax de jQuery) ou via quelque chose comme JavaScript.location.href = URL;  

Dans cette URL, vous aurez les données que vous souhaitez envoyer à PHP. Vous trouverez ci-dessous un exemple de fonction JavaScript pouvant être appelée en appuyant sur un bouton.

<?php
              function add() {
                var a = 1;
                var b = 2;
                window.location.href = "add.php?var1=" + a + "&var2=" + b;
              }
            ?>
            

Dans cette fonction ci-dessus, nous avons deux variables JavaScript dans l’URL. Nous disons ensuite à « window » d’accéder à la page « add.php » avec les deux paramètres « var1 » et « var2 » qui contient les données. Ici, nous passons deux variables de JavaScript à PHP. Le navigateur accéderait alors à l’URL http://www.exemple.com/add.php?var1=1&var2=2.

Réception et traitement des variables en PHP

Maintenant que JavaScript a émis la requête et passé certains paramètres, PHP peut récupérer les données dans le tableau $_GET.

<?php
              function add() {
                 // Vérifiez si les paramètres var1 et var2 sont transmis au script via l’URL
                 if (isset($_GET["var1"]) && isset($_GET["var2"])) {
                  $somme = $_GET["var1"] + $_GET["var2"];
                  echo $_GET["var1"]." + ".$_GET["var2"]." = ".$somme;
                 }
              }
            ?>
            

Ce code afficherait alors la somme des deux variables envoyé depuis le code JavaScript :

Sortie :

1 + 2 = 3