Pasar variable de PHP a JavaScript
En este tutorial te mostraré un pequeño truco para hacer que una variable de PHP esté accesible desde JavaScript. Y no solo una variable, también un objeto, arreglo, etcétera.
Si bien esto no es recomendable, pues en su lugar debería usarse AJAX, podemos usar este pequeño truco en apuros para hacer que una variable de PHP esté disponible en JavaScript.
Debido a que PHP es un lenguaje que preprocesa el contenido HTML que se muestra, podemos hacer que se muestre un script de JavaScript (dentro de la misma página) y con PHP renderizar partes del contenido.
Quedará más claro con el ejemplo, pero basta con que sepas que para que esto funcione, el script debe estar “inline” en la página web, y no separado. Sin embargo también hay un modo de pasar variables a otros scripts, y lo veremos en los ejemplos.
Veamos el ejemplo más simple y queda así:
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<?php
// Esta variable puede venir de cualquier lugar
$miVariable = "Parzibyte";
// Aquí más código...
?>
<script type="text/javascript">
const miVariableEnJavaScript = "<?php echo $miVariable ?>";
// Justo aquí estamos pasando la variable ----^
// Y ya la tenemos desde JavaScript. Podemos hacer cualquier cosa con ella
console.log("El contenido de la variable es: " + miVariableEnJavaScript)
</script>
</body>
</html>
La magia sucede en la línea 14. Fíjate que es importante, en caso de que sea una cadena, de encerrarlo entre comillas (obviamente) pues PHP solo imprimirá el valor. El HTML final que va a generar la página sería:
<html>
<head>
<title>PHP Test</title>
</head>
<body>
<script type="text/javascript">
const miVariableEnJavaScript = "Parzibyte";
// Justo aquí estamos pasando la variable ----^
// Y ya la tenemos desde JavaScript. Podemos hacer cualquier cosa con ella
console.log("El contenido de la variable es: " + miVariableEnJavaScript)
</script>
</body>
</html>
Si quieres que tu variable viva de manera global y sea accesible desde otros scripts, también es posible. Podrías definirla en el encabezado y agregarla a window de JavaScript:
<html>
<?php
// Esta variable puede venir de cualquier lugar
$miVariable = "Parzibyte";
// Aquí más código...
?>
<head>
<title>PHP Test</title>
<script type="text/javascript">
window.miVariableEnJavaScript = "<?php echo $miVariable ?>";
// Justo aquí estamos pasando la variable ----^
</script>
<!--Y ya podemos incluir otros scripts ;)-->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Parzibyte.me</p>
</body>
</html>Después, para acceder a ella en un script externo se haría lo siguiente:
console.log("Globalmente la variable es... " + window.miVariableEnJavaScript);Y eso haría que la variable pasada de PHP a JavaScript sea accesible desde cualquier script. Solo recuerda definirla antes de incluir los otros scripts.
Anteriormente solo pasamos una simple cadena; pero podemos pasar también datos compuestos usando JSON. Gracias a que JSON representa, de cierto modo, datos nativos en JavaScript, podemos simplemente pasarlos codificados usando json_encode.
Veamos el siguiente ejemplo:
<html>
<?php
// Esta variable puede venir de cualquier lugar
$datos = [
"nombre" => "Luis Cabrera Benito",
"videojuegos_favoritos" => ["Resident Evil 2", "Celeste", "Cuphead", "Donkey Kong"],
"edad" => 22,
"mascota" => [
"nombre" => "Maggie"
]
];
// Aquí más código...
?>
<head>
<title>PHP Test</title>
<script type="text/javascript">
const datos = <?php echo json_encode($datos); ?>
// Justo aquí estamos pasando la variable ----^
console.log("Los datos son: ", datos);
// Y podemos usar los datos normalmente ;)
const nombre = datos.nombre;
const videojuegos_favoritos = datos.videojuegos_favoritos;
videojuegos_favoritos.forEach(videojuego => console.log("A %s le gusta jugar %s", nombre, videojuego));
</script>
</head>
<body>
<p>Parzibyte.me</p>
</body>
</html>Tenemos una variable digamos, compuesta. La estamos pasando a JavaScript con JSON. En este caso no necesitamos comillas pues JSON ya codifica directamente a datos que JavaScript entiende.
Al procesar el documento se va a generar lo siguiente:
<html>
<head>
<title>PHP Test</title>
<script type="text/javascript">
const datos = {"nombre":"Luis Cabrera Benito","videojuegos_favoritos":["Resident Evil 2","Celeste","Cuphead","Donkey Kong"],"edad":22,"mascota":{"nombre":"Maggie"}} // Justo aquí estamos pasando la variable ----^
console.log("Los datos son: ", datos);
// Y podemos usar los datos normalmente ;)
const nombre = datos.nombre;
const videojuegos_favoritos = datos.videojuegos_favoritos;
videojuegos_favoritos.forEach(videojuego => console.log("A %s le gusta jugar %s", nombre, videojuego));
</script>
</head>
<body>
<p>Parzibyte.me</p>
</body>
</html>Como ves, los datos son válidos. Después de eso ya podemos acceder a los mismos. En este caso pasé un objeto, pero podría ser un arreglo.
También se puede almacenar de manera global y bueno, todo lo que te puedas imaginar; depende de tus necesidades.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.
Ver comentarios
Saludos:
Si funciona bien el pasar una cadena directamente desde php, gracias por la magia.
Muchas gracias por la ayuda, he buscado una forma mas sencilla de pasar los datos entre los ambientes