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

Question

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

J'ai du code qui ressemble à ceci:

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

J'ai du code JavaScript qui a besoin valet qui 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>

Answer 1

Il existe en fait plusieurs approches pour y parvenir. 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 du serveur.
2. Faites écho aux données dans la page quelque part et utilisez JavaScript pour obtenir les informations du DOM.
3. Faites écho aux données directement dans 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 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 que vous souhaitez passer à un servlet, une API REST ou un autre service, vous n'aurez pas à changer une grande partie du 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 / ressources. Parfois, vous ne voulez tout simplement pas attendre les informations, charger la page et avoir les informations à tout moment.
• Les données ne se trouvent pas directement sur le balisage - Cela signifie que votre balisage est exempt de toute donnée supplémentaire et que seul JavaScript les voit.

Les inconvénients

• Latence - AJAX crée une requête HTTP, et les requêtes HTTP sont transportées sur le réseau et ont des latences réseau.
• État - Les données extraites via une requête HTTP distincte n'incluront aucune information de la requête HTTP qui a récupéré le document HTML. Vous pouvez 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, devrez les transférer d'une manière ou d'une autre. Si vous avez exclu l'intégration des 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 alertera 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 dans la page quelque part et utilisez JavaScript pour obtenir les informations du DOM

Cette méthode est moins préférable à AJAX, mais elle a toujours 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, 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 dénué 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.
• Dirtie la source - Les données générées par PHP sont envoyées directement à 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 échapper et convertir vous-même les chaînes.
• Associe é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 qui sera 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 sur JavaScript

C'est probablement le plus simple à comprendre.

Avantages

• Très facile à mettre en œuvre - Il en faut très peu pour l'implémenter et le comprendre.
• Ne modifie pas la source - Les variables sont envoyées directement vers JavaScript, le DOM n'est donc pas affecté.

Les inconvénients

• Associe é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!

Answer 2

Je vais essayer une réponse plus simple:

Explication du problème

Tout d'abord, comprenons le flux des é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 HTML est livré au client, une fois PHP terminé, je tiens à souligner qu'une fois que le code quitte le serveur - PHP en a terminé avec et ne peut plus y accéder.
• Ensuite, le HTML avec JavaScript atteint le client, qui peut exécuter JavaScript sur ce HTML.

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

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

Solutions

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

Est-ce que j'écris 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 en AJAX et effectuent de nombreux aller-retour pour obtenir rapidement des informations sur le client (par exemple, un tableau de bord de stock).

Site Internet

L'envoi de plus de demandes du client après la demande initiale est lent car cela nécessite plus de demandes HTTP qui ont une surcharge importante. De plus, il nécessite une asynchrone car la création d'une requête AJAX nécessite un gestionnaire pour le moment où elle est terminée.

Je ne recommanderais pas de faire une autre demande à moins que votre site ne soit une application permettant d'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 les requêtes HTTP que le serveur et le client peuvent lire.
• Encodez la variable comme JSON - JSON est très proche des 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 court analyseur roulé à la main, mais la réponse à laquelle j'ai lié juste au-dessus en a de mieux testés:

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_encodecapable du côté PHP (c'est généralement le cas). Cette technique est ce que Stack Overflow fait avec son chat par exemple (en utilisant uniquement .NET au lieu de PHP).

Application

Si vous écrivez une application, soudainement, le temps de chargement initial n'est pas toujours aussi important que les performances en cours de l'application, et il commence à être rentable de charger les données et le code séparément.

Ma réponse ici explique 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 contenant du code qui saisit les données et en fait quelque chose, 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 c'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 .

Answer 3

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 du 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

Answer 4

<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.

Answer 5

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>

Answer 6

J'aime assez 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 un script 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 sert à ajouter un script, à définir la source et les dépendances sur d'autres scripts, ainsi que les données supplémentaires nécessaires au 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 '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 à l'intérieur d'un nouveau bloc de script et sont placées devant lui, il contient un mydataobjet contenant des données supplémentaires, désormais disponibles pour «script personnalisé».

Answer 7

Essaye ça:

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

-

-Après avoir essayé cela pendant un moment

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

Answer 8

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 produit 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 car 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 comme cela n'est pas défini, il produira un fatal Erreur.

Et

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

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

Notez également 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, $valil faudrait par exemple contenir la parenthèse fermante:$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.

Answer 9

J'ai mis au point une méthode simple pour attribuer des variables JavaScript à l'aide de PHP.

Il utilise des attributs de données HTML5 pour stocker les variables PHP, puis il est affecté à 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");
}

Answer 10

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);
      }
   }
}

Answer 11

En voici une que je ne vois pas publiée comme une 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 "your_php_file.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;
?>

Answer 12

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>
   

Answer 13

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 une chaîne en un objet JSON.

<?PHP
    $number = 'abcd';

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

Puisque abcddans JSON est "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 de la console

Answer 14

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

Dans le script 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 lequel de votre code JavaScript appelé sur la page, appelez simplement ces variables.

Answer 15

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 à la fois côté serveur et côté client), alors que c'est plus simple la fonction d'échappement devrait suffire.

Donc, nous sommes de retour pour nous échapper. json_encode($string)fonctionne si vous encodez d'abord la chaîne source en UTF-8 au cas où ce ne serait pas déjà le cas, car json_encodenécessite des données UTF-8. Si la chaîne est dans 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()sur le résultat pour que le code soit correct. Et puis, vous devez soit faire attention à utiliser des guillemets doubles pour entourer l'événement, soit toujours ajouter ENT_QUOTESaux 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 utiliser htmlspecialcharsdu code JavaScript standard (code inclus dans des balises <script>... </script>). Cela rend l'utilisation de cette fonction sujette à des 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, à condition que vous entouriez toujours vos événements entre guillemets simples ou toujours entre guillemets doubles. Voici ma proposition, les obligeant à être entre guillemets (ce 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>';

Answer 16

Selon votre code

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

Vous pouvez maintenant obtenir de la valeur en utilisant DOM, utiliser innerHTML de span id, dans ce cas, vous n'avez pas besoin de faire un appel au serveur, ou Ajax ou autre chose.

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

Answer 17

<?php

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

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

?>