Comment passer des variables et des données de PHP vers JavaScript ?

Question

J'ai une variable en PHP et j'ai besoin de sa valeur en code JavaScript. Comment convertir mes variables de PHP en JavaScript ?

Mon code ressemble à ceci :

getValue(); // Effectue un appel à l'API et à la 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 simple.

Vous pouvez en savoir plus sur les propriétés des ensembles de données ici : https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 2

Il existe en fait plusieurs façons de procéder. Certains nécessitent plus de frais généraux que d’autres, et certains sont considérés comme meilleurs que d’autres.

Sans ordre particulier :

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

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

1. Utilisez AJAX pour obtenir les données dont vous avez besoin du serveur

Cette méthode est considérée comme la meilleure car vos 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'avez pas besoin de modifier trop de code JavaScript.
• Plus lisible - JavaScript est JavaScript et PHP est PHP. Sans mélanger les deux, vous obtenez un code plus lisible dans les deux langages.
• Permet le transfert de données asynchrone - Obtenir des informations à partir de PHP peut prendre beaucoup de temps et de ressources. Parfois, vous ne voulez tout simplement pas attendre des informations, charger une page et la recevoir à tout moment.
• Les données ne peuvent pas être trouvées directement sur la marque - Cela signifie qu'il n'y a aucune autre donnée dans votre balisage et que seul JavaScript peut les voir.

Inconvénients

• Delay - AJAX crée des requêtes HTTP et les requêtes HTTP sont envoyées sur le réseau avec des délais réseau.
• Status - Les données récupérées via une requête HTTP distincte ne contiendront aucune information de la requête HTTP qui a récupéré le document HTML. Vous pourriez avoir besoin de ces informations (par exemple, si le document HTML est généré en réponse à la soumission d'un formulaire), et si c'est le cas, vous devez les transmettre d'une manière ou d'une autre. Si vous avez exclu l'intégration de données dans la page (dont vous êtes propriétaire si vous utilisez cette technologie), cela limite votre utilisation des cookies/sessions qui peuvent être soumises à des conditions concurrentes.

Exemple de mise en œuvre

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

Obtenir data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to `echo` the result.
                      // All data should be `json_encode`-d.

                      // You can `json_encode` any value in PHP, arrays, strings,
                      // even objects.

index.php (ou quel que soit le nom de la page)

<!-- snip -->
<script>
    fetch("get-data.php")
        .then((response) => {
            if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
                              // check for any errors.
                // In case of an error, throw.
                throw new Error("Something went wrong!");
            }

            return response.json(); // Parse the JSON data.
        })
        .then((data) => {
             // This is where you handle what to do with the response.
             alert(data); // Will alert: 42
        })
        .catch((error) => {
             // This is where you handle errors.
        });
</script>
<!-- snip -->

La combinaison des deux fichiers ci-dessus déclenchera une alerte lorsque le chargement du fichier sera terminé 42.

Plus de matériel de lecture

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

2. Faites écho aux données quelque part sur la page et utilisez JavaScript pour obtenir des informations du DOM

Cette méthode n'est pas aussi performante qu'AJAX, mais elle a quand même ses avantages. Il existe toujours une séparation relative entre PHP et JavaScript, dans le sens où il n'y a pas de PHP direct en 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 utiliserez une sorte d'attribut 来存储信息，因为获取信息更容易超出 inputNode.value，但这样做意味着 HTML 中存在无意义的元素。 HTML 具有用于表示有关文档的数据的 元素，并且 HTML 5 引入了 data-* spécifiquement pour les données qui peuvent être lues à l'aide de JavaScript et qui peuvent être associées à un élément spécifique.
• Désordre avec le code source - Les données générées par PHP sont directement sorties dans le code source HTML, ce qui signifie que vous obtiendrez 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.
• Couplez étroitement PHP avec la logique des données - Puisque PHP est utilisé pour les présentations, vous ne pouvez pas complètement séparer les deux.

Exemple de mise en œuvre

Avec cela, l'idée est de créer une sorte d'élément qui ne sera pas montré à l'utilisateur, mais qui est visible par JavaScript.

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3. Écho des données directement vers JavaScript

C'est probablement le plus simple à comprendre.

Avantages

• Très facile à mettre en œuvre - prend très peu de temps à mettre en œuvre et à comprendre.
• Pas de pollution - Les variables sont sorties directement vers JavaScript, le DOM n'est donc pas affecté.

Inconvénients

• Couplez étroitement PHP avec la logique des données - Puisque PHP est utilisé pour les présentations, vous ne pouvez pas complètement séparer les deux.

Exemple de mise en œuvre

La mise en œuvre est relativement simple :

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

Bonne chance à vous !