Comment passer des variables et des données de PHP à JavaScript?
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 en 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 de val et ressemble à ceci:
<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 le 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:
- Utilisez AJAX pour obtenir les données dont vous avez besoin du serveur.
- Faites écho des données dans la page quelque part, et utilisez JavaScript pour obtenir les informations du DOM.
- Écho des données directement à JavaScript.
Dans cet article, nous examinerons chacune des méthodes ci-dessus et verrons les avantages et les inconvénients de chacune d’elles, ainsi que la manière 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 des couches - Si vous arrêtez d'utiliser PHP aujourd’hui et souhaitez passer à un servlet, une API REST, ou autre service, vous n'avez pas à changer beaucoup de 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.
- Autorise le transfert de données asynchrone - Obtenir les informations à partir de PHP peut nécessiter beaucoup de temps et de ressources. Parfois, vous ne voulez tout simplement pas attendre les informations, charger la page et les faire parvenir à tout moment.
- Les données ne se trouvent pas directement dans le balisage - Cela signifie que votre balisage est maintenu vierge de toute donnée supplémentaire, et que seul JavaScript le voit.
Les inconvénients
- Latence - AJAX crée une requête HTTP. Les requêtes HTTP sont acheminées sur le réseau et possèdent des latences.
- State - Les données extraites via une requête HTTP distincte n'incluent aucune information provenant de la requête HTTP ayant récupéré le document HTML. Vous aurez peut-être besoin de ces informations (par exemple, si le document HTML est généré en réponse à une soumission de formulaire) et, le cas échéant, devrez les transférer d'une manière ou d'une autre. Si vous avez exclu l’incorporation 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 concurrence.
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 l'autre, 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)
<!-- 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 42 lorsque le chargement du fichier sera terminé.
Encore du matériel de lecture
- tilisation de XMLHttpRequest - MDN
- Référence d'objet XMLHttpRequest - MDN
- Comment renvoyer la réponse d'un appel asynchrone?
2. Faites écho des 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 toujours relativement séparé entre PHP et JavaScript en ce sens qu'il n'y a pas de PHP directement dans JavaScript.
Avantages
- Rapide - Les opérations DOM sont souvent rapides et vous pouvez stocker et accéder à beaucoup de données assez 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 de les obtenir. surinputNode.value, mais cela signifie que vous avez un élément sans signification dans votre code HTML. HTML contient l'élément<meta>pour les données relatives au document et HTML 5 introduit les attributsdata-*pour les données destinées à la lecture avec JavaScript pouvant être associées à 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 image plus volumineuse et moins ciblée. Source HTML.
- Plus difficile d'obtenir des données structurées - Les données structurées devront être du code HTML valide, sinon vous devrez vous échapper et convertir vous-même des chaînes.
- associe étroitement PHP à votre logique de données - Étant donné 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. Écho des données directement en JavaScript
C'est probablement le plus facile à comprendre.
Avantages
- Très facilement implémenté - Cela prend très peu pour implémenter ceci, et comprendre.
- Ne pas salir la source - Les variables sont sorties directement en JavaScript, le DOM n'est donc pas affecté.
Les inconvénients
- associe étroitement PHP à votre logique de données - Étant donné 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
Commençons par comprendre le flux d’événements lorsqu’une page est servie par notre serveur:
- Tout d'abord, PHP est exécuté, il génère le code HTML transmis au client.
- Ensuite, le code HTML est remis au client. Une fois que PHP est terminé, je tiens à souligner qu’une fois que le code quitte le serveur - PHP est terminé et peut n'y avoir plus accès.
- Ensuite, le code HTML avec JavaScript atteint le client, qui peut exécuter le code JavaScript sur ce code HTML.
Donc vraiment, l'essentiel à retenir ici est que HTTP est sans état . Une fois qu'une demande a quitté le serveur, le serveur ne peut plus y toucher. Donc, cela laisse nos options à:
- Envoyez plus de demandes du client après la demande initiale est faite.
- Encoder ce que le serveur avait à dire dans la requête initiale.
Solutions
Voilà la question fondamentale que vous devriez vous poser est la suivante:
Est-ce que je suis 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 AJAX lourdes et effectuent de nombreux allers-retours pour obtenir rapidement des informations sur le client (par exemple, un tableau de bord boursier).
Site Internet
L'envoi de davantage de demandes du client après la demande initiale est lent , car il nécessite davantage de demandes HTTP ayant un temps système important. De plus, il nécessite asynchrone , car faire une demande AJAX nécessite un gestionnaire pour la fin de son exécution.
Je ne recommanderais pas de faire une autre requête à moins que votre site ne soit une application permettant d'obtenir cette information du serveur.
Vous souhaitez des temps de réponse rapides ayant un impact considérable sur les temps de conversion et de chargement. Les demandes Ajax sont lentes pour la disponibilité initiale dans ce cas et inutiles.
Vous avez deux moyens de vous attaquer au 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.
- Encodez la variable au format JSON - JSON semble très proche des objets JavaScript et la plupart des objets JSON sont des scripts JavaScript valides. variables.
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, mais la réponse que j’ai liée au-dessus de celle-ci a été mieux testée:
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:
<script>
var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
//server data
</script>
En supposant que $value soit json_encodeable sur le 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, le temps de chargement initial devient soudainement moins important que les performances constantes de l'application, et il devient rentable de charger les données et le code séparément.
Ma réponse ici explique comment charger des données à l'aide de 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 doit simplement contenir une route/fichier /your/url qui contient le code qui récupère les données et les utilise, 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. Ceci est plus propre et commence à porter ses fruits à mesure que l'application augmente. C'est aussi une meilleure séparation des problèmes et cela permet de tester le code côté client sans aucune technologie côté serveur, ce qui est un autre avantage.
Postscript: Vous devez être très au courant des vecteurs d'attaque XSS lorsque vous injectez quoi que ce soit de PHP en JavaScript. Il est très difficile d'échapper aux valeurs correctement et dépend du contexte. Si vous ne savez pas comment traiter avec XSS, ou si vous ne le savez pas, veuillez lire cet article d'OWASP , celui-ci et cette question .
J'utilise habituellement les 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');
// Service variable 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é dataset 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
$PHPVarcodé au format UTF-8, Unicode.
tilisez 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>
Essaye ça:
<?php
echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>
-
-Après avoir essayé pendant un moment
Bien que cela fonctionne, cela ralentit toutefois les performances. Comme PHP est un script côté serveur, alors que JavaScript est côté utilisateur.
J'aime assez la manière dont WordPress fonctionne avec ses fonctions en file d'attente et localize , donc, en suivant ce modèle, j'ai écrit une classe simple pour mettre un script dans page en fonction des dépendances du script et pour la mise à disposition de données supplémentaires 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 fonction enqueue_script() sert à ajouter un script, à définir la source et les dépendances d'autres scripts, ainsi qu'à des 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 méthode print_scripts() 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' soit 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'. Les données supplémentaires pour le 'script personnalisé' se trouvent dans un nouveau bloc de script et sont placées devant celui-ci. Il contient l'objet mydata contenant des données supplémentaires, désormais disponibles pour le 'script personnalisé'.
myPlugin.start($val); // Tried this, didn't work
Cela ne fonctionne pas parce que $val n'est pas défini en ce qui concerne JavaScript, c'est-à-dire que le code PHP n'a généré aucun résultat 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 myPlugin comme une constante et lorsque cela échouera, il essaiera de la traiter comme la chaîne 'myPlugin' avec laquelle il essaiera de concaténer. la sortie de la fonction PHP _ start() et, comme elle n'est pas définie, une erreur fatale sera générée.
Et
myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
Bien que cela soit le plus susceptible de fonctionner, étant donné que le code PHP génère un code JavaScript valide avec les arguments attendus, s'il échoue, il y a de grandes chances que ce soit parce que myPlugin n'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().
EDIT
Parce que je n'ai pas remarqué la parenthèse manquante dans myPlugin.start(<?=$val?>: - \
Comme @Second Rikudo le souligne, pour que cela fonctionne correctement, $val aurait besoin de contenir la parenthèse fermante, par exemple: $val="42);"
Cela signifie que PHP va maintenant produire myPlugin.start(42); et fonctionnera comme prévu une fois exécuté par le code JavaScript.
Je suis sorti avec une méthode facile pour attribuer des variables JavaScript en utilisant 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");
}
- Convertir les données en JSON
- Appelez AJAX pour recevoir le fichier JSON
- 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 un que je ne vois pas posté en option. C'est similaire à l'utilisation d'Ajax, mais clairement différent.
Commencez par définir la source d'un script directement dans un fichier PHP.
<script type="text/javascript" src="url_to_your_php_file.php" /></script>
Vous pouvez même renvoyer une variable dans le fichier PHP, comme dans l'exemple suivant:
<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>
Puis dans "votre_php_fichier.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 le truc:
Voici votre 'PHP' pour utiliser cette variable:
<?php $name = 'PHP variable'; echo '<script>'; echo 'var name = ' . json_encode($name) . ';'; echo '</script>'; ?>Maintenant, vous avez une variable JavaScript appelée
'name', et voici votre code JavaScript pour utiliser cette variable:<script> console.log("I am everywhere " + name); </script>
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 de 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.
Disons que votre variable est toujours un entier. Dans ce cas, c'est plus facile:
<?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.
Ainsi, dans PHP, nous avons un appel de fonction json_encode qui code la chaîne en un objet JSON.
<?PHP
$number = 'abcd';
echo '<script>';
echo 'var number = ' . json_encode($number) . ';';
echo 'alert(number);';
echo '</script>';
?>
Puisque abcd dans 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
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 serveur et client). côté), quand une fonction d'échappement plus simple devrait suffire.
Nous sommes donc de nouveau en fuite. json_encode($string) fonctionne if vous encodez d'abord la chaîne source au format UTF-8 au cas où ce ne serait pas déjà le cas, car json_encode né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 iconv pour effectuer la conversion en premier.
Mais il y a un gros piège. Si vous l'utilisez dans des événements, vous devez exécuter htmlspecialchars() sur le résultat pour que le code soit correct. Ensuite, vous devez soit utiliser des guillemets doubles pour clôturer l'événement, soit 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 utiliser htmlspecialchars sur du code JavaScript normal (code inclus dans les balises <script>...</script>). Cela rend l'utilisation de cette fonction sujette aux erreurs, en oubliant de htmlspecialchars le résultat lors de l'écriture du code d'événement.
Il est possible d'écrire une fonction qui ne pose pas ce problème et qui peut être utilisée à la fois dans les événements et dans du code JavaScript classique, à condition de placer vos événements toujours entre guillemets simples ou 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>';
Selon votre code
<$php
$val = $myService->getValue(); // Makes an API and database call
echo '<span id="value">'.$val.'</span>';
$>
Maintenant, vous pouvez obtenir une valeur en utilisant DOM, utilisez innerHTML ou span id. Dans ce cas, vous n'avez pas besoin d'appeler un serveur, ni Ajax, ni autre chose.
Votre page l’imprimera à l’aide de PHP et votre code JavaScript obtiendra une valeur en utilisant DOM.
<?php
$val = $myService->getValue(); // Makes an API and database call
echo "
<script>
myPlugin.start({$val});
</script> ";
?>