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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
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