Comment passer une variable de PHP à JavaScript ?

Pour passer une variable de PHP vers JavaScript, il existe plusieurs méthodes. Le point.

PHP et JavaScript sont des langages couramment utilisés dans le même temps sur plusieurs sites web. PHP est utilisé pour effectuer des traitements serveurs, et JavaScript des interactions avec l'utilisateur. Il arrive donc que vous deviez passer une variable de PHP vers JavaScript, et pour réaliser cela, il existe plusieurs méthodes.

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];

PHP