Comment transmettre des variables et des données PHP à JavaScript

Question

J'ai une variable en PHP et je dois utiliser sa valeur dans mon code JavaScript. Comment puis-je transmettre mes variables de PHP vers JavaScript ?

J'ai le code suivant :

getValue(); // Effectuer des appels d'API et de base de données
≪/pré>
Sur la même page, j'ai du code JavaScript qui doit transmettre la valeur de la variable $val

≪/pré>

            

Answer 1

J'utilise généralement les attributs data-* en HTML.

<div
    class="service-container"
    data-service="<?= htmlspecialchars($myService->getValue()) ?>"
>

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Var "service" now contains the value of $myService->getValue();
        });
    });
</script>

Cet exemple utilise jQuery, mais il peut être adapté à d'autres bibliothèques ou à du JavaScript natif.

Vous pouvez en savoir plus sur la propriété dataset ici : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 2

Il existe en fait plusieurs façons de procéder. Certaines méthodes nécessitent plus de temps système et certaines sont considérées comme meilleures que d’autres.

Sans ordre particulier :

1. Utilisez AJAX pour obtenir les données requises du serveur.
2. Faites écho aux données à un emplacement de la page et utilisez JavaScript pour obtenir des informations du DOM.
3. Écho des données directement dans JavaScript.

Dans cet article, nous détaillerons les avantages et les inconvénients de chacune des méthodes ci-dessus, et comment les mettre en œuvre.

1. Utilisez AJAX pour obtenir les données requises du serveur

Cette approche est considérée comme la meilleure car les scripts côté serveur et côté client sont complètement séparés.

Avantages

• Meilleure séparation entre les couches - Si demain vous arrêtez d'utiliser PHP et souhaitez passer aux servlets, aux API REST ou à d'autres services, vous n'aurez pas besoin de changer beaucoup de code JavaScript.
• Plus facile à lire - JavaScript est JavaScript, PHP est PHP. En ne mélangeant pas les deux, vous obtenez un code plus lisible.
• Permet le transfert de données asynchrone - Récupérer des informations à partir de PHP peut prendre beaucoup de temps et de ressources. Parfois, vous ne voulez tout simplement pas attendre des informations, charger la page, puis l'obtenir lorsqu'elle arrive.
• Les données n'apparaissent pas directement dans le balisage - Cela signifie que votre balisage reste propre, sans aucune donnée supplémentaire, visible uniquement par JavaScript.

Inconvénients

• Delay - AJAX crée une requête HTTP, et les requêtes HTTP voyagent sur le réseau et ont des retards sur le réseau.
• STATUT - Les données obtenues via une requête HTTP distincte ne contiendront aucune information obtenue à partir de la requête HTTP pour obtenir le document HTML. Vous pourriez avoir besoin de ces informations (par exemple, si le document HTML a été généré en réponse à la soumission d'un formulaire), et si vous le faites, vous devrez les transmettre d'une manière ou d'une autre. Si vous avez exclu l'intégration de données dans la page (ce que vous avez exclu si vous utilisez cette technique), vous ne pouvez utiliser que des cookies/sessions, qui peuvent être soumis à des conditions de concurrence.

Exemple de mise en œuvre

Avec AJAX, vous avez besoin de deux pages, une sur laquelle PHP génère la sortie et une autre sur laquelle JavaScript obtient cette sortie :

get-data.php

/* 在这里执行一些操作，比如与数据库、文件会话等进行交互
 * 超越世界，无间地带，闪烁之城和加拿大。
 *
 * AJAX通常使用字符串，但你也可以输出JSON、HTML和XML。
 * 这完全取决于你发送的AJAX请求的Content-type头。 */

echo json_encode(42); // 最后，你需要`echo`结果。
                      // 所有数据都应该使用`json_encode`。

                      // 你可以在PHP中`json_encode`任何值，数组、字符串，
                      // 甚至对象。

index.php (ou le nom de la page réelle)

<!-- 省略 -->
<script>
    fetch("get-data.php")
        .then((response) => {
            if(!response.ok){ // 在解析（即解码）JSON数据之前，
                              // 检查是否有任何错误。
                // 如果有错误，抛出错误。
                throw new Error("Something went wrong!");
            }

            return response.json(); // 解析JSON数据。
        })
        .then((data) => {
             // 在这里处理响应。
             alert(data); // 将弹出：42
        })
        .catch((error) => {
             // 在这里处理错误。
        });
</script>
<!-- 省略 -->

La combinaison des deux fichiers ci-dessus apparaîtra une fois le chargement du fichier terminé42.

Plus de matériel de lecture

• Utilisez l'API Fetch
• Comment renvoyer une réponse à un appel asynchrone ?

2. Faites écho aux données à un certain emplacement de la page et utilisez JavaScript pour obtenir les informations du DOM

Cette approche est moins souhaitable que AJAX, mais elle a quand même ses avantages. D'une certaine manière, c'est encore relativement séparé entre PHP et JavaScript, puisque PHP n'est pas utilisé directement dans JavaScript.

Avantages

• Rapide - Les opérations DOM sont généralement rapides et vous pouvez stocker et accéder à de grandes quantités de données relativement rapidement.

Inconvénients

• Marquage potentiellement non sémantique - En règle générale, vous utilisez une sorte d'attribut <input type=hidden>来存储信息，因为从inputNode.value中获取信息更容易，但这样做意味着你的HTML中有一个无意义的元素。HTML有<meta>元素用于文档的数据，HTML 5引入了data-* pour les données liées à JavaScript sur un élément spécifique.
• Encombrez le code source - Les données générées par PHP sont directement générées dans le code source HTML, ce qui signifie que vous obtenez un code source HTML plus grand et moins ciblé.
• Plus difficile d'obtenir des données structurées - Les données structurées doivent être du HTML valide, sinon vous devez échapper et convertir les chaînes vous-même.
• Associez étroitement PHP à la logique des données - Parce que PHP est utilisé pour la présentation, il n'y a aucun moyen de séparer clairement les deux.

Exemple de mise en œuvre

Dans ce cas, vous devez créer une sorte d'élément invisible pour l'utilisateur mais visible par JavaScript.

index.php

<!-- 省略 -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // 再次，执行一些操作，获取输出。
        echo htmlspecialchars($output); /* 必须转义，否则结果
                                           将不是有效的HTML。 */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- 省略 -->

3. Faites écho aux données directement dans JavaScript

C'est probablement la méthode la plus simple à comprendre.

Avantages

• Très simple à mettre en œuvre - Le coût pour y parvenir est très faible et facile à comprendre.
• Pas de pollution du code source - les variables sont sorties directement en JavaScript, donc