Transférer des données de PHP vers JavaScript : guide complet avec exemples

Comment transférer des données de PHP vers JavaScript : questions fréquentes et réponses

Avez-vous déjà écrit un script PHP, généré un tableau de données depuis une base, puis réalisé avec horreur que le code JavaScript sur la même page n'en savait rien ? Situation familière. PHP fonctionne sur le serveur, JavaScript dans le navigateur de l'utilisateur. Ce sont deux mondes différents, séparés par le temps et l'espace. Mais comment les faire collaborer ? Comment transmettre des variables et des données de PHP vers JavaScript ?

Ce sujet est l'une des questions les plus populaires sur Stack Overflow (des dizaines de milliers de vues !). Et pour cause : l'interaction entre le code serveur et le code client est une compétence fondamentale pour tout développeur web. Dans cet article, nous allons explorer 5 méthodes éprouvées pour transférer des données de PHP vers JavaScript, des plus simples aux plus avancées. C'est parti !

Pourquoi PHP et JavaScript ne peuvent-ils pas simplement dialoguer ?

Avant de plonger dans le code, comprenons l'architecture. Lorsqu'un utilisateur demande une page, voici ce qui se passe :

\n
1. Le serveur exécute le script PHP.
\n
2. PHP génère le HTML (et peut y insérer du JavaScript).
\n
3. Le serveur envoie le code HTML final au navigateur.
\n
4. Le navigateur affiche la page et exécute le JavaScript.
\n

Point clé : PHP s'exécute avant que JavaScript ne voie la page. Par conséquent, le transfert de variables de PHP vers JavaScript n'est possible qu'au moment de la génération du HTML. JavaScript ne peut pas "demander" des données à PHP après le chargement de la page (pour cela, il existe AJAX, mais c'est une autre histoire).

Méthode 1 : Intégrer PHP directement dans JavaScript (la plus simple)

La méthode la plus évidente consiste à afficher une variable PHP directement dans le code JavaScript généré par le serveur. Exemple :

<?php\n$userName = "Alex";\n$userAge = 28;\n?>\n\n<script>\n    var name = "<?php echo $userName; ?>";\n    var age = <?php echo $userAge; ?>;\n    console.log("Bonjour " + name + " ! Tu as " + age + " ans.");\n</script>\n

Ça marche ? Oui. C'est joli ? Pas vraiment. Les inconvénients sont évidents :

\n
• Le code devient sale et difficile à lire.
\n
• Si la variable contient des guillemets ou des balises HTML, vous obtiendrez une erreur de syntaxe en JavaScript.
\n
• Sécurité ? Oubliez : les attaques XSS vous remercieront.
\n

Cette méthode ne convient que pour les chaînes simples sans caractères spéciaux (par exemple, un ID d'enregistrement ou un numéro de page). Pour tout le reste, utilisez les méthodes suivantes.

Méthode 2 : JSON — le roi du transfert de données

JSON (JavaScript Object Notation) est le format standard d'échange de données entre le serveur et le client. PHP peut transformer n'importe quel tableau ou objet en JSON avec une seule fonction json_encode(). JavaScript, de son côté, parse facilement le JSON.

Exemple : transmettre un tableau d'utilisateurs de PHP vers JavaScript.

<?php\n$users = [\n    ['name' => 'Jean', 'age' => 25],\n    ['name' => 'Marie', 'age' => 30],\n    ['name' => 'Pierre', 'age' => 35]\n];\n$jsonUsers = json_encode($users, JSON_UNESCAPED_UNICODE);\n?>\n\n<script>\n    var users = <?php echo $jsonUsers; ?>;\n    console.log(users[0].name); // "Jean"\n    console.log(users.length); // 3\n</script>\n

Pourquoi c'est génial ?

\n
• Sécurisé : json_encode() échappe automatiquement les caractères spéciaux.
\n
• Universel : transmettez des chaînes, des nombres, des tableaux, des objets, des booléens.
\n
• Propre : le code est facile à lire et à maintenir.
\n

Le seul inconvénient est que les données sont intégrées directement dans le code HTML de la page. Si les données sont volumineuses, la page deviendra plus lourde. Mais pour la plupart des tâches, c'est l'option optimale.

Méthode 3 : Les data-attributes HTML (pour transmettre via le DOM)

Parfois, vous devez transmettre des données liées à un élément spécifique de la page. Par exempl