Cómo pasar datos de PHP a JavaScript: guía completa con ejemplos

Cómo pasar datos de PHP a JavaScript: preguntas frecuentes y respuestas

¿Alguna vez has escrito un script en PHP, generado un array con datos de la base de datos, y luego te has dado cuenta con horror de que el código JavaScript en la misma página no sabe nada al respecto? Una situación familiar. PHP funciona en el servidor, JavaScript en el navegador del usuario. Son dos mundos diferentes, separados por el tiempo y el espacio. Pero, ¿cómo hacer que se lleven bien? ¿Cómo pasar variables y datos de PHP a JavaScript?

Este tema es una de las preguntas más populares en Stack Overflow (¡decenas de miles de visitas!). Y no es para menos: la interacción entre el código del servidor y el del cliente es una habilidad fundamental para cualquier desarrollador web. En este artículo, analizaremos 5 métodos comprobados para pasar datos de PHP a JavaScript, desde los más simples hasta los más avanzados. ¡Allá vamos!

¿Por qué PHP y JavaScript no pueden simplemente hablar?

Antes de sumergirnos en el código, entendamos la arquitectura. Cuando un usuario solicita una página, ocurre lo siguiente:

\n
1. El servidor ejecuta el script PHP.
\n
2. PHP genera HTML (y puede insertar JavaScript en él).
\n
3. El servidor envía el código HTML listo al navegador.
\n
4. El navegador renderiza la página y ejecuta JavaScript.
\n

Punto clave: PHP se ejecuta antes de que JavaScript vea la página. Por lo tanto, pasar variables de PHP a JavaScript solo es posible durante la fase de generación del HTML. JavaScript no puede "solicitar" datos a PHP después de que la página se haya cargado (para eso está AJAX, pero esa es otra historia).

Método 1: Incrustar PHP directamente en JavaScript (el más simple)

La forma más obvia es imprimir la variable PHP directamente en el código JavaScript que genera el servidor. Ejemplo:

<?php\n$userName = "Alex";\n$userAge = 28;\n?>\n\n<script>\n    var name = "<?php echo $userName; ?>";\n    var age = <?php echo $userAge; ?>;\n    console.log("Hola, " + name + "! Tienes " + age + " años.");\n</script>\n

¿Funciona? Sí. ¿Es bonito? No mucho. Las desventajas son obvias:

\n
• El código se vuelve sucio y difícil de leer.
\n
• Si la variable contiene comillas o etiquetas HTML, obtendrás un error de sintaxis en JavaScript.
\n
• ¿Seguridad? Olvídalo: los ataques XSS te lo agradecerán.
\n

Este método solo es adecuado para cadenas simples sin caracteres especiales (por ejemplo, el ID de un registro o el número de página). Para todo lo demás, usa los siguientes métodos.

Método 2: JSON — el rey de la transferencia de datos

JSON (JavaScript Object Notation) es el formato estándar para el intercambio de datos entre el servidor y el cliente. PHP puede convertir cualquier array u objeto a JSON con una sola función json_encode(). JavaScript, a su vez, parsea JSON fácilmente.

Ejemplo: pasamos un array de usuarios de PHP a JavaScript.

<?php\n$users = [\n    ['name' => 'Juan', 'age' => 25],\n    ['name' => 'María', 'age' => 30],\n    ['name' => 'Pedro', 'age' => 35]\n];\n$jsonUsers = json_encode($users, JSON_UNESCAPED_UNICODE);\n?>\n\n<script>\n    var users = <?php echo $jsonUsers; ?>;\n    console.log(users[0].name); // "Juan"\n    console.log(users.length); // 3\n</script>\n

¿Por qué es genial?

\n
• Seguro: json_encode() escapa automáticamente los caracteres especiales.
\n
• Universal: transfiere cadenas, números, arrays, objetos, valores booleanos.
\n
• Limpio: el código es fácil de leer y mantener.
\n

El único inconveniente es que los datos se incrustan directamente en el código HTML de la página. Si hay muchos datos, la página se vuelve más pesada. Pero para la mayoría de las tareas, esta es la opción óptima.

Método 3: data-attributes HTML (para transferir a través del DOM)

A veces necesitas pasar datos relacionados con un elemento específico en la página. Por ejem