J'ai une variable en PHP et j'ai besoin de sa valeur dans mon code JavaScript. Comment puis-je obtenir ma variable de PHP à JavaScript?

J'ai un code qui ressemble à ceci:

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

J'ai du code JavaScript qui a besoin valet ressemble à:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>

Il existe en fait plusieurs approches pour ce faire. Certains nécessitent plus de frais généraux que d'autres, et certains sont considérés comme meilleurs que d'autres.

Dans aucun ordre particulier:

1. Utilisez AJAX pour obtenir les données dont vous avez besoin sur le serveur.
2. Faites écho aux données quelque part dans la page et utilisez JavaScript pour obtenir les informations du DOM.
3. Faites écho aux données directement en JavaScript.

Dans cet article, nous examinerons chacune des méthodes ci-dessus et verrons les avantages et les inconvénients de chacune, ainsi que la façon de les mettre en œuvre.

1. Utilisez AJAX pour obtenir les données dont vous avez besoin sur le 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 que vous souhaitez passer à une servlet, une API REST ou un autre service, vous n'avez pas besoin de modifier beaucoup le code JavaScript.
• Plus lisible - JavaScript est JavaScript, PHP est PHP. Sans mélanger les deux, vous obtenez un code plus lisible dans les deux langues.
• Permet le transfert de données asynchrone - Obtenir les informations de PHP peut être coûteux en temps / en ressources. Parfois, vous ne voulez tout simplement pas attendre les informations, charger la page et obtenir les informations à tout moment.
• Les données ne se trouvent pas directement sur le balisage - Cela signifie que votre balisage est conservé à l'abri de toute donnée supplémentaire, et seul JavaScript les voit.

Les inconvénients

• Latence - AJAX crée une requête HTTP et les requêtes HTTP sont effectuées sur le réseau et ont latences du réseau.
• État - Les données extraites via une demande HTTP distincte n'incluront aucune information de la demande HTTP qui a extrait le document HTML. Vous pourriez avoir besoin de ces informations (par exemple, si le document HTML est généré en réponse à une soumission de formulaire) et, si vous le faites, vous devrez les transférer d'une manière ou d'une autre. Si vous avez exclu d'incorporer les données dans la page (que vous avez si vous utilisez cette technique), cela vous limite aux cookies / sessions qui peuvent être soumis à des conditions de course.

Exemple d'implémentation

Avec AJAX, vous avez besoin de deux pages, l'une est l'endroit où PHP génère la sortie, et la seconde est l'endroit où JavaScript obtient cette sortie:

get-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 réelle)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

La combinaison ci-dessus des deux fichiers avertira 42lorsque le fichier aura fini de se charger.

Encore du matériel de lecture

• Utilisation de XMLHttpRequest - MDN
• Référence d'objet XMLHttpRequest - MDN
• Comment renvoyer la réponse d'un appel asynchrone?

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

Cette méthode est moins préférable à AJAX, mais elle a quand même ses avantages. Il est encore relativement séparé entre PHP et JavaScript dans le sens où il n'y a pas de PHP directement dans le JavaScript.

Avantages

• Rapide - Les opérations DOM sont souvent rapides et vous pouvez stocker et accéder à un grand nombre de données relativement rapidement.

Les inconvénients

• Balisage potentiellement non sémantique - Habituellement, ce qui se passe, c'est que vous utilisez une sorte de <input type=hidden>pour stocker les informations, car il est plus facile d'extraire les informations inputNode.value, mais cela signifie que vous avez un élément vide de sens dans votre HTML. HTML a l' <meta>élément pour les données sur le document, et HTML 5 introduit des data-*attributs pour les données spécifiquement pour la lecture avec JavaScript qui peuvent être associés à des éléments particuliers.
• Dirties up the Source - Les données générées par PHP sont directement transmises à la source HTML, ce qui signifie que vous obtenez une source HTML plus grande et moins ciblée.
• Plus difficile d'obtenir des données structurées - Les données structurées devront être du HTML valide, sinon vous devrez vous échapper et convertir les chaînes vous-même.
• Couples étroitement PHP à votre logique de données - Parce que PHP est utilisé dans la présentation, vous ne pouvez pas séparer les deux proprement.

Exemple d'implémentation

Avec cela, l'idée est de créer une sorte d'élément qui ne sera pas affiché à l'utilisateur, mais 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. Faites écho des données directement à JavaScript

C'est probablement le plus facile à comprendre.

Avantages

• Très facilement implémenté - Il faut très peu pour implémenter cela et comprendre.
• Ne source pas sale - Les variables sont sorties directement en JavaScript, donc le DOM n'est pas affecté.

Les inconvénients

• Couples étroitement PHP à votre logique de données - Parce que PHP est utilisé dans la présentation, vous ne pouvez pas séparer les deux proprement.

Exemple d'implémentation

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!

Je vais essayer une réponse plus simple:

Explication du problème

Tout d'abord, comprenons le flux d'événements lorsqu'une page est servie à partir de notre serveur:

• Tout d'abord PHP est exécuté, il génère le HTML qui est servi au client.
• Ensuite, le code HTML est livré au client, une fois PHP terminé, je voudrais souligner qu'une fois que le code quitte le serveur - PHP en a fini avec lui et ne peut plus y accéder.
• Ensuite, le code HTML avec JavaScript atteint le client, qui peut exécuter JavaScript sur ce code HTML.

Donc, vraiment, l'essentiel à retenir ici est que HTTP est sans état . Une fois qu'une requête a quitté le serveur, le serveur ne peut plus la toucher. Donc, cela laisse nos options pour:

1. Envoyez plus de demandes du client une fois la demande initiale terminée.
2. Encodez ce que le serveur avait à dire dans la demande initiale.

Solutions

C'est la question centrale que vous devriez vous poser:

Suis-je en train d'écrire un site Web ou une application?

Les sites Web sont principalement basés sur des pages, et les temps de chargement des pages doivent être aussi rapides que possible (par exemple, Wikipedia). Les applications Web sont plus lourdes AJAX et effectuent de nombreux allers-retours pour obtenir rapidement des informations du client (par exemple - un tableau de bord de stock).

Site Internet

L'envoi de plus de demandes du client une fois la demande initiale terminée est lent car il nécessite plus de demandes HTTP qui ont une surcharge importante. De plus, cela nécessite une asynchronisme car faire une requête AJAX nécessite un gestionnaire pour quand elle est terminée.

Je ne recommanderais pas de faire une autre demande à moins que votre site soit une application pour obtenir ces informations du serveur.

Vous voulez des temps de réponse rapides qui ont un impact énorme sur les temps de conversion et de chargement. Faire des requêtes Ajax est lent pour la disponibilité initiale dans ce cas et inutile.

Vous avez deux façons de résoudre le problème

• Définir un cookie - les cookies sont des en-têtes envoyés dans des requêtes HTTP que le serveur et le client peuvent lire.
• Encode la variable en JSON - JSON ressemble très près aux objets JavaScript et la plupart des objets JSON sont des variables JavaScript valides.

Définir un cookie n'est vraiment pas très difficile, il vous suffit de lui attribuer une valeur:

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

Ensuite, vous pouvez le lire avec JavaScript en utilisant document.cookie:

Voici un analyseur roulé à la main courte, mais la réponse que j'ai liée juste au-dessus de celle-ci en a de mieux testées:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

Les cookies sont bons pour un peu de données. C'est ce que font souvent les services de suivi.

Une fois que nous avons plus de données, nous pouvons les encoder avec JSON dans une variable JavaScript à la place:

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

En supposant que $valuec'est json_encodepossible du côté PHP (c'est généralement le cas). Cette technique est ce que fait Stack Overflow avec son chat par exemple (en utilisant uniquement .NET au lieu de PHP).

Application

Si vous écrivez une application - tout à coup, le temps de chargement initial n'est pas toujours aussi important que les performances en cours de l'application, et cela commence à payer pour charger les données et le code séparément.

Ma réponse explique ici comment charger des données à l'aide d'AJAX en JavaScript:

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

Ou avec jQuery:

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

Maintenant, le serveur a juste besoin de contenir une /your/urlroute / un fichier qui contient du code qui saisit les données et fait quelque chose avec, dans votre cas:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

De cette façon, notre fichier JavaScript demande les données et les affiche plutôt que de demander du code ou une mise en page. C'est plus propre et commence à porter ses fruits à mesure que l'application augmente. C'est également une meilleure séparation des préoccupations et cela permet de tester le code côté client sans aucune technologie côté serveur impliquée, ce qui est un autre avantage.

Postscript: Vous devez être très conscient des vecteurs d'attaque XSS lorsque vous injectez quoi que ce soit de PHP à JavaScript. Il est très difficile d'échapper correctement aux valeurs et il est sensible au contexte. Si vous ne savez pas comment gérer XSS, ou si vous ne le savez pas - veuillez lire cet article OWASP , celui-ci et cette question .

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

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

</div>

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

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

Cet exemple utilise jQuery, mais il peut être adapté pour une autre bibliothèque ou JavaScript vanilla.

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

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode () nécessite:

• PHP 5.2.0 ou plus
• $PHPVar encodé en UTF-8, Unicode.

Utilisez simplement l'une des méthodes suivantes.

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

OU

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>

J'aime bien la façon dont WordPress fonctionne avec ses fonctions de mise en file d'attente et de localisation , donc en suivant ce modèle, j'ai écrit une classe simple pour mettre des scripts en page en fonction des dépendances du script et pour rendre des données supplémentaires disponibles pour le script.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

L'appel à la enqueue_script()fonction est pour ajouter un script, définir la source et les dépendances sur d'autres scripts, et les données supplémentaires nécessaires pour le script.

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

Et, la print_scripts()méthode de l'exemple ci-dessus enverra cette sortie:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

Indépendamment du fait que le script 'jquery' est mis en file d'attente après le 'jquery-ui', il est imprimé avant car il est défini dans 'jquery-ui' qu'il dépend de 'jquery'. Des données supplémentaires pour le «script personnalisé» se trouvent dans un nouveau bloc de script et sont placées devant, il contient un mydataobjet qui contient des données supplémentaires, désormais disponibles pour le «script personnalisé».

Essaye ça:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

-

-Après avoir essayé cela pendant un certain temps

Bien que cela fonctionne, il ralentit cependant les performances. Comme PHP est un script côté serveur tandis que JavaScript est un côté utilisateur.

myPlugin.start($val); // Tried this, didn't work

Cela ne fonctionne pas car il $valn'est pas défini en ce qui concerne JavaScript, c'est-à-dire que le code PHP n'a rien sorti pour $val. Essayez d'afficher la source dans votre navigateur et voici ce que vous verrez:

myPlugin.start(); // I tried this, and it didn't work

Et

<?php myPlugin.start($val); ?> // This didn't work either

Cela ne fonctionne pas parce que PHP essaiera de traiter myPlugincomme une constante et quand cela échouera, il essaiera de la traiter comme la chaîne 'myPlugin'qu'il essaiera de concaténer avec la sortie de la fonction PHP start()et puisque cela n'est pas défini, cela produira un fatal Erreur.

Et

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

Bien que cela soit le plus susceptible de fonctionner, puisque le code PHP produit du JavaScript valide avec les arguments attendus, s'il échoue, il est probable que ce myPluginn'est pas encore prêt. Vérifiez votre ordre d'exécution.

Vous devez également noter que la sortie du code PHP n'est pas sécurisée et doit être filtrée avec json_encode().

ÉDITER

Parce que je n'ai pas remarqué la parenthèse manquante dans myPlugin.start(<?=$val?>: - \

Comme le souligne @Second Rikudo, pour que cela fonctionne correctement, il $valdevrait contenir la parenthèse fermante, par exemple:$val="42);"

Cela signifie que le PHP va maintenant produire myPlugin.start(42);et fonctionnera comme prévu lorsqu'il est exécuté par le code JavaScript.

Je suis sorti avec une méthode simple pour assigner des variables JavaScript en utilisant PHP.

Il utilise des attributs de données HTML5 pour stocker des variables PHP, puis il est attribué à JavaScript lors du chargement de la page.

Un tutoriel complet peut être trouvé ici .

Exemple:

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

Voici le code JavaScript

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

1. Convertissez les données en JSON
2. Appelez AJAX pour recevoir le fichier JSON
3. Convertir JSON en objet Javascript

Exemple:

ÉTAPE 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

ÉTAPE 2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

En voici une que je ne vois pas affichée en option. C'est similaire à l'utilisation d'Ajax, mais clairement différent.

Tout d'abord, définissez la source d'un script directement sur un fichier PHP.

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

Vous pouvez même renvoyer une variable au fichier PHP comme cet exemple:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

Puis dans "votre_fichier_php.php":

<?php
    // THIS IS A SIMPLE EXAMPLE
    // it demonstrates one method of using the src attribute to link
    // to a PHP file which can generate JavaScript code dynamically
    // and share data between PHP and JavaScript
    // you may take this learning example and develop it further
    // relying on your own coding skills for validating data
    // and avoiding errors, of course
    header('content-type: text/javascript');

    // If you pass a $_GET variable from the JavaScript
    // you should add code to validate your $_GET variable(s)

    // You can add code to query a database
    // using $_GET['var1'] or some other criteria

    // You can add simple variable assignments
    $value = 'some value';

    // For the OP's needs (assumes the class object has been defined)
    $val = $myService->getValue();
?>

function name() {
    // Pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both PHP and JavaScript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = <?php echo '"' . $val . '"'; ?>;
    var example2 = <?php echo '"' . $value . '"'; ?>;
    var example3 = <?php echo '"some other data"'; ?>;
    alert( example1 + ' / ' + example2 );
}

<?php
    // You may even want to include additional files (.php or .js, etc.)
    @include 'local_path_to_some_other_js_file.js';
    @include 'local_path_to_some_other_php_file.php';

    exit;
?>

Voici l'astuce:

1. Voici votre 'PHP' pour utiliser cette variable:

   <?php
       $name = 'PHP variable';
       echo '<script>';
       echo 'var name = ' . json_encode($name) . ';';
       echo '</script>';
   ?>

2. Vous avez maintenant une variable JavaScript appelée 'name', et voici votre code JavaScript pour utiliser cette variable:

   <script>
        console.log("I am everywhere " + name);
   </script>

Disons que votre variable est toujours un entier. Dans ce cas, c'est plus simple:

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Sortie :

<script>var number = 4;alert(number);</script>

Disons que votre variable n'est pas un entier, mais si vous essayez la méthode ci-dessus, vous obtiendrez quelque chose comme ceci:

<script>var number = abcd;alert(number);</script>

Mais en JavaScript, c'est une erreur de syntaxe.

Donc, en PHP, nous avons un appel de fonction json_encodequi encode la chaîne en un objet JSON.

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

Étant donné que abcddans JSON "abcd", cela ressemble à ceci:

<script>var number = "abcd";alert(number);</script>

Vous pouvez utiliser la même méthode pour les tableaux:

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

Et votre code JavaScript ressemble à ceci:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

Sortie console

Après de nombreuses recherches, j'ai trouvé que la méthode la plus simple est de passer facilement toutes sortes de variables.

Dans le script du serveur, vous avez deux variables et vous essayez de les envoyer aux scripts client:

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

Dans n'importe quel code JavaScript appelé sur la page, appelez simplement ces variables.

Je suppose que les données à transmettre sont une chaîne.

Comme d'autres commentateurs l'ont déclaré, AJAX est une solution possible, mais les inconvénients l'emportent sur les avantages: il a une latence et il est plus difficile à programmer (il a besoin du code pour récupérer la valeur côté serveur et côté client), quand un plus simple la fonction d'échappement devrait suffire.

Donc, nous sommes de retour à l'évasion. json_encode($string)fonctionne si vous codez d'abord la chaîne source en UTF-8 au cas où elle ne le serait pas déjà, car json_encodenécessite des données UTF-8. Si la chaîne est en ISO-8859-1, vous pouvez simplement utiliser json_encode(utf8_encode($string)); sinon, vous pouvez toujours utiliser iconvpour effectuer la conversion en premier.

Mais il y a un gros problème. Si vous l'utilisez dans des événements, vous devez exécuter htmlspecialchars()le résultat afin de le rendre correct. Et puis vous devez être prudent d'utiliser des guillemets doubles pour entourer l'événement, ou toujours ajouter ENT_QUOTESà htmlspecialchars. Par exemple:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

Cependant, vous ne pouvez pas l'utiliser htmlspecialcharssur du code JavaScript standard (code entouré de balises <script>... </script>). Cela utilise cette fonction sujette aux erreurs, en oubliant htmlspecialcharsle résultat lors de l'écriture du code d'événement.

Il est possible d'écrire une fonction qui n'a pas ce problème et peut être utilisée à la fois dans des événements et dans du code JavaScript normal, tant que vous mettez vos événements toujours entre guillemets simples ou toujours entre guillemets doubles. Voici ma proposition, les obligeant à être entre guillemets (que je préfère):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

La fonction nécessite PHP 5.4+. Exemple d'utilisation:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

Selon votre code

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

Maintenant, vous pouvez obtenir de la valeur en utilisant DOM, utilisez innerHTML de span id, dans ce cas, vous n'avez pas besoin d'appeler le serveur, ou Ajax ou autre chose.

Votre page l'imprimera en utilisant PHP et votre JavaScript obtiendra de la valeur en utilisant DOM.

<?php

    $val = $myService->getValue(); // Makes an API and database call

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

PHP

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

JS (yourexternal.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

PRODUCTION

La couleur pomme est jaune, la couleur fraise est rouge et la couleur kiwi est verte.

Pour ceux qui ont des problèmes à utiliser le code ci-dessous et qui continuent de s'afficher <?php echo $username?>ou quelque chose comme ça, allez modifier le httpd.conf dans la section mime_module en ajoutant ce 'AddType application / x-httpd-php .html .htm' car il peut être désactivé par défaut.

<?php
    $username = 1;
?>

<script type="text/javascript">
    var myData = <?php echo $username ?>;
    console.log(myData);
    alert(myData);
</script>

Utilisation:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

et cela fonctionnera. Il s'agit simplement d'affecter une variable JavaScript, puis de transmettre la valeur d'une variable PHP existante. Puisque PHP écrit les lignes JavaScript ici, il a la valeur de la variable PHP et peut la transmettre directement.