Pasar datos de PHP a Javascript y viceversa

Pasar datos de PHP a Javascript y viceversa
Pasar datos de PHP a Javascript y viceversa

PHP es un lenguaje de programación del lado del servidor bastante potente, pero como todos los lenguajes del lado del servidor, está limitado a hacer las tareas allí, en el servidor. Y por lo tanto las tareas que se tienen que hacer en el cliente no las puede hacer PHP. En este caso deberemos usar un lenguaje del lado del cliente, como lo es Javascript.

Pero hay ocasiones en las que tienes que pasar datos de PHP a Javascript y viceversa. Por ejemplo si tienes un script en Javascript o jQuery que hace unas gráficas con datos de una base de datos que está alojada en nuestro servidor, que viene siendo lo habitual, tendremos que pasar un array con los datos para las gráficas desde PHP a Javascript.

Hay varias formas para hacer esto, y elegir entre ellas es cuestión de lo que necesites. Que quede claro que esto es una visión personal, cada cual puede trabajar como quiera.

Dicho esto, vamos a ver como pasar datos de PHP a Javascript.

Pues lo más normal viene siendo escribir las variables que queremos pasar entre etiquetas “script”, de esa forma cuando se cargue la página se cargarán en memoria las variables, para poder usarlas con Javascript.


<!DOCTYPE html>
<html lang="es">
<head>
    <script>
        var datos = '<?php echo $datos_grafica; ?>';
    </script>
</head>
<body>
</body>
</html>

Con este método tenemos que cargar la página entera. Si venimos de otra página, no hay problema, pero si ya estábamos en esta página, entonces se hará una recarga, actualizando todo el contenido de esta. Puede ser que eso nos interese, o no.

Por ejemplo, si estos datos que necesitamos para hacer una gráfica van a condicionar que se muestre un contenido u otro, como diferentes imágenes o una estructura diferente del DOM, nos vendrá de perlas que se recargue la página entera.

Pero por el contrario, si estos datos sólo van a influir en la gráfica, y el resto de la página va a ser idéntico, esta no es la mejor forma de pasarlos, ya que estarías obligando al navegador a descargar de nuevo todo ese contenido que ya está ahí, y en dispositivos móviles es importantísimo ahorrar el máximo ancho de banda posible. Supongamos que los datos necesarios para la gráfica son unos 300 bytes, y la página entera con sus scripts, imágenes, hojas de estilos y demás tiene un peso de 1 megabyte, si actualizamos la gráfica dos veces tendríamos un tráfico de 600 bytes sin recargar la página y de 2.097.752 bytes recargandola. Como puedes comprobar, esto se multiplica de una forma espectacular con mayor número de recargas. Así que lo que yo recomiendo es cargar la gráfica de la forma que ya hemos visto (pasando los valores entre etiquetas script), y recargarla o actualizarla vía AJAX que no sólo le ahorramos datos a nuestros visitantes, sino que también mejoramos la experiencia de usuario.

Ya hemos visto la forma de pasar valores de PHP a Javascript en forma de variables. Y gracias a HTML5, también podemos pasar valores en forma de atributos de los objetos del DOM, a través del atributo DATA. Yo suelo usar bastante esta forma de pasar valores, que no sería el más adecuado para el ejemplo de la gráfica, pero es muy útil para pasar valores asociados a los objetos del DOM.

Por ejemplo, podríamos poner el precio, la referencia, la categoría o si está en oferta a cada producto de una lista. Y se haría así.

<div class='miniatura' data-referencia='<?php echo $referencia; ?>' data-sistema='<?php echo $sistema; ?>'>

De esta forma podríamos cambiarle el color de fondo o mostrar una etiqueta de oferta, o lo que se nos ocurra.

<div id='prod_0' class='producto' data-oferta='<?php echo $oferta[0]; ?>'>
<div id='prod_1' class='producto' data-oferta='<?php echo $oferta[1]; ?>'>
<div id='prod_2' class='producto' data-oferta='<?php echo $oferta[2]; ?>'>

Tengo que puntualizar que usar valores pasados por variables o array es más rápido que por atributos del DOM, ya que el acceso a estos últimos es más lento. Pero también es cierto que seguramente no notaremos diferencia, a menos que el rendimiento sea importante. Si accedemos una sola vez a los datos, la diferencia de tiempo pueden ser unos milisegundos, pero si tenemos que acceder repetidas veces, ese tiempo se multiplica pudiendo llegar a varios segundos. Así que si has pasado los datos a través de atributos DATA y tienes que acceder repetidas veces a ellos, es mejor pasarlos a variables así.


var prod_0 = $('#prod_0').data('oferta');
var prod_1 = $('#prod_1').data('oferta');
var prod_2 = $('#prod_2').data('oferta');

Es más rápido acceder a la variable javascript “prod_0″ que al valor del atributo “data-oferta” del objeto “prod_0″ del DOM.

Y también podemos pasar datos de variables javascript a atributos DATA así.


$('#prod_0').data('oferta', prod_0);
$('#prod_1').data('oferta', prod_1);
$('#prod_2').data('oferta', prod_2);

Ya hemos visto dos formas de pasar datos del servidor con PHP, al cliente en javascript y en el DOM. Ahora toca ver dos formas de subir datos del cliente al servidor, lo haremos con los métodos GET y POST de un formulario.

El método GET usa la Url para pasar los datos, y lo podemos usar en un formulario o en un Link, esto es una ventaja respecto al método POST, pero tenemos la limitación en tamaño y la desventaja de que los datos están visibles en la URL.

Imaginemos que tenemos una web de humor y tenemos dos categorías de chistes, para todos los públicos y para adultos, pero tendremos que saber si el visitante es mayor de edad, para mostrarle unos u otros.

Podríamos hacer esto.

<form id="formulario_edad" method="GET" action="pagina_destino.php">
<label for="fr_edad" class="fr">¿Eres mayor de edad? Si/No:</label>
<input
id="fr_edad"
name="fr_edad"
type="text"
title="Debes indicar si eres mayor de edad."
maxlength="2"
required
/>
<input type="submit" id="btn_edad" name="btn_edad" value="Enviar"/>
</form>

Así lo mandamos a través de un formulario. Y a través de un Link sería de la siguiente manera.

<span>¿Eres mayor de edad?</span>
<a href="pagina_destino.php?mayor_edad=si">Si</a> - <a href="pagina_destino.php?mayor_edad=no">No</a>

Este método se suele usar en los e-mails. Ese típico enlace con números y símbolos raros. Algo como esto.

http://phpyjavascript.com/chistes?user=103&ts=j3wjshfipz6je92gdngha08encjalgest73sniog

Donde pasamos una variable con el codigo de usuario y un token de seguridad que nos garantiza que se está accediendo desde el e-mail.

Para pasar datos por POST, lo tenemos que hacer a través de un formulario,
igual que antes lo hicimos con GET, pero con POST no se muestra en la URL y por lo tanto no tenemos las limitaciones de esta.

Los formularios tienen la posibilidad de mandar datos ocultos en objetos de formulario de tipo “hidden”, lo que nos viene muy bien para subir datos de variables al servidor sin tener que crear objetos input de otro tipo que se muestran en pantalla, así no llenamos la web de datos que no es necesario que se muestren, como podría ser la resolución de pantalla o un token de seguridad para garantizar que los datos recibidos provienen de este formulario y no de una tercera persona.

Hay que tener en cuenta que los objetos input tipo “hidden” sólo ocultan los datos en la web, pero en realidad son visibles con facilidad, en la web hacemos click derecho y pulsamos en mostrar código fuente y podemos ver ahí los objetos input tipo “hidden” junto con todos los demás. Y con las herramientas de desarrolladores que traen tanto Firefox como chrome podemos ver con mucha precisión todos los objetos del DOM, y por supuesto los “hidden” también. Con estas herramientas podemos ver también todos los datos que se envían y reciben del cliente al servidor y viceversa y los tiempos que tardan, y todas y cada una de las conexiones y su orden. Algún día hablaré de las bondades de estas herramientas, pero hoy no es lo que toca. Las he nombrado para que sepas que los objetos “hidden” no están a simple vista, pero están a sólo un click, así que ya lo sabes.

Ahora una muestra.

<form id="formulario_edad" method="POST" action="pagina_destino.php">
<span for="fr_edad" class="fr">¿Eres mayor de edad?</span>

<input type="submit" id="btn_si" name="btn_si" value="Sí"/>
<input type="submit" id="btn_no" name="btn_no" value="No"/>
<input type="hidden" id="token" name="token" value="012efr5424k" />

</form>

Esto que vemos es un formulario con un objeto input “hidden” con un token de seguridad, y dos objetos input tipo botón, uno con el texto “Sí” y otro con “No”. Si pulsamos en “Sí”, se cargará la página “pagina_destino.php” y se le cargará las variables $_POST[‘btn_si’]=”Sí” y $_POST[‘token’]=”012efr5424k”.

Seguramente no hace falta que te diga que se cargará la página que hayas puesto en el action del formulario, con lo cual, si quieres recargar la página en donde estás, solo tienes que poner su nombre ahí.

Ya hemos visto como pasar variables del servidor al cliente a través de la cabecera de la página con Script /Script, y al DOM a través de los atributos data. También hemos visto como pasar variables del cliente al servidor con los métodos GET y POST. Todos estos métodos requieren cargar o recargar la página.

Ahora llega el momento de la magia, pasaremos datos sin recargar la página, y de forma asíncrona, lo que significa que la página no se paraliza esperando los datos del servidor. Y para ello usaremos jQuery, esa librería javascript que nos facilita tanto la vida. Vamos a ver la función $.getJSON().

Esta función de jQuery usa el método AJAX (Asynchronous JavaScript And XML), esto no significa que tengamos que usar el sistema XML. AJAX tiene la X de XML por que se inventó para usarlo con este sistema de datos para tener compatibilidad total con todos los navegadores, pero nosotros lo usaremos con el sistema de notación JSON que es mucho más liviano que XML, y como ya te he comentado un poco más arriba, en la web cada byte cuenta, y todo lo que podamos ahorrar bienvenido sea.

Si no estás familiarizado con AJAX, solo comentarte que este método funciona de la siguiente manera. El cliente hace una petición al servidor esperando una respuesta de forma asíncrona, con lo cual toda la página sigue totalmente activa y funcional mientras espera la respuesta, que evidentemente tiene un tiempo límite para recibirla. Al hacer la petición al servidor, se pueden enviar datos para que sean procesados, y en función del resultado, recibiremos diferentes datos en la respuesta.

Por ejemplo, si mandamos dos variables a un script que multiplica el valor de estas y mandamos las variables a=2 y b=5 el resultado será c=10, pero si mandamos a=2 y b=7 el resultado será c=14. Como puedes comprobar, si mandamos datos diferentes al servidor, recibiremos también una respuesta diferente.

Dicho esto seguiremos con el ejemplo de la página de humor, y usando la función $.getJSON() sería algo así.

En el archivo HTML la pregunta “¿Eres mayor de edad?” y los enlaces No, y un div para mostrar los chistes.

Archivo HTML

<span>¿Eres mayor de edad?</span>
<a href="#" id="enlace_si">Sí</a> - <a href="#" id="enlace_no">No</a>
<div id="div_chistes"></div>

En el archivo Javascript las funciones de los eventos click y la petición al servidor, la función que procesará los datos retornados, y las llamadas a las funciones de los eventos click.

Archivo JS

function chistes_adultos() {
    array_json['mayor_de_edad'] = "si";
    array_json['token'] = token;
    $.getJSON("lista_chistes.php", array_json, mostrar_chistes);
}
function chistes_todos_publicos() {
    array_json['mayor_de_edad'] = "no";
    array_json['token'] = token;
    $.getJSON("lista_chistes.php", array_json, mostrar_chistes);
}
function mostrar_chistes(datos) {
    $('#div_chistes').html(datos.respuesta);
}
var respuesta_si = $('#enlace_si');
respuesta_si.click(chistes_adultos);
var respuesta_no = $('#enlace_no');
respuesta_no.click(chistes_todos_publicos);

Ahora solo falta el script PHP que devolverá una lista de chistes u otra en función de si mayor_de_edad es sí o no.

Archivo PHP lista_chistes.php

<?php
session_start();
header('Content-Type: text/txt; charset=ISO-8859-1');
if ($_REQUEST['token' != $_SESSION['token']) {
    $respuesta == "Hay un error en tu token de seguridad, vuelve a intentarlo";
} else {
    if ($_REQUEST['mayor_de_edad'] == "si") {
        $respuesta == "Lista de chistes para adultos";
    } else {
        $respuesta == "Lista de chistes para todos los públicos";
    }
}

echo "{
  'respuesta':'$respuesta'
}";
?>

Paso ahora a explicar paso a paso lo que ocurre.

En el archivo HTML hago la pregunta de si eres mayor de edad o no, pongo dos links, uno para sí y otro para no, y un div para mostrar los chistes que nos devolverá el servidor.

En el archivo JS primero pongo tres funciones. La primera se ejecutará en caso de click en el enlace “Sí”, que hará la petición al script “lista_chistes.php” alojado en el servidor, con dos variables que se almacenan en un array llamado “array_json”. La segundo es igual que la primera, solo que se ejecutará en caso de click en el enlace “No”, y el valor de la primera variable cambia de “si” a “no”. La tercera función es la que se encarga de recoger la respuesta del servidor y mostrarla en el div que ya dejamos preparado para eso. Después hay el código que recoge el evento click y ejecuta la función que toque según el link que hayas pulsado.

Y por último en el archivo PHP lista_chistes.php primero hacemos el session_start() si es que usamos sesiones, y debemos usarlas si es que usamos el token, así que si no usamos sesiones esa línea podemos obviarla y si no usamos token también podemos obviar todas las líneas referentes a ello. La siguiente línea conforma la cabecera, para indicar que los datos devueltos son de tipo texto. Después compruebo si el token que he recibido y el que hay en la variable de sesión son diferentes, si es así, posiblemente la petición ha sido alcanzada por alguien, y lo que se envía en vez de chistes es una advertencia de que algo va mal. Si el token recibido y el de la variable de sesión no son diferentes significa que la petición es fidedigna y se procede a comprobar si eres mayor de edad o no, y almacena una lista de chistes u otra en la variable “respuesta” que es devuelta al cliente mediante la instrucción “echo”.

En este caso he devuelto solo una variable para simplificar la demostración, pero igual que se puede mandar un array del cliente al servidor, también se puede del servidor al cliente. Y le he aplicado el valor de las variables directamente, aunque lo más lógico es coger los chistes de una base de datos y almacenarlos en un array que será devuelto y mostrado, pero eso es otro cantar.

Si te ha gustado, lo puedes compartir.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>