Mi pregunta es: ¿cómo mover una variable PHP a una página en Javascript?.
Tengo esta variable $temp
en PHP. Bueno, ahí es constante, pero será variable.
Moverla acá a Javascript. Les agradecería muchisimo su ayuda.
Mi pregunta es: ¿cómo mover una variable PHP a una página en Javascript?.
Tengo esta variable $temp
en PHP. Bueno, ahí es constante, pero será variable.
Moverla acá a Javascript. Les agradecería muchisimo su ayuda.
Solo existe una forma segura de pasar el contenido de variables de PHP a Javascript en tiempo de generación del documento, y es haciendo uso de json_encode()
.
JSON usa la representación nativa de datos de Javascript, por lo que la función agregará comillas a las variables que sean cadenas de caracteres, agregará corchetes a las matrices (arrays), llaves a las clases (o matrices de índices alfanuméricos), etc.
Un ejemplo de uso sería:
<?php
$temp = 500;
?><script>
/* Si defines la variable "temp1" antes de llamar a tu javascript: */
var temp1 = <?= json_encode($temp) ?>;
/* O si prefieres incluir el contenido de la variable directamente en "highTemps": */
highTemps = [ <?= json_encode($temp) ?>, 120, 90, 140, 640, 330 ];
</script>
Es MUY IMPORTANTE que cualquier variable, sobre todo las que no controlas o conoces de antemano su contenido, sean enviadas al documento HTML sin usar json_encode()
ya que podrías sufrir problemas de seguridad relacionados con XSS (cross-site scripting).
Estos mismos problemas los podrías sufrir si agregas datos al documento, a un dataset
por ejemplo, sin hacer uso de htmlspecialchars()
:
<elemento data-temp="<?= htmlspecialchars($temp) ?>">...</elemento>
Si deseas consultar a PHP el valor actualizado de algo sin refrescar la página, entonces entran en juego XMLHttpRequest
y fetch
.
Hay varias formas de conseguirlo:
<script>
en tu HTML dónde crearás la variable JavaScript a la cual le asignarás el valor de tu variable PHP:<script>
var $temp = "<?= $temp ?>";
</script>
data-*
:<body data-temp="<?= $temp ?>">
y luego rescatas el valor de ese atributo desde dónde lo vayas a usar:
$temp = document.querySelector('body').getAttribute('data-temp');