Envío de datos desde Javascript a PHP utilizando JSON con Mootools

A raíz de una duda de un usuario publicada en las discusiones de DesarrolloWeb.com he realizado un pequeño script para realizar comunicación de datos complejos desde Javascript a PHP. Para esta transferencia de información lo más cómodo que resulta es utilizar JSON, ya que es una notación que entienden tanto Javascript como PHP.

A lo largo del Manual de JSON para PHP habíamos tratado ya diversos ejemplos de comunicación de datos entre PHP y Javascript, pero revisando el texto con calma veo que no hemos hecho ningún ejemplo sobre cómo realizar el paso contrario, es decir, enviar los datos de Javascript hacia PHP.

La transferencia de esa información se podría hacer de diversas maneras, pero creo que lo más cómodo sería hacer una conexión Ajax desde Javascript, enviando los datos en notación JSON hacia una página PHP. Tanto para utilizar Ajax con comodidad, como para generar el JSON, es interesante utilizar algún framework Javascript que nos facilite las tareas, por lo que en este ejemplo veremos cómo realizar el proceso utilizando Mootools.

Estructura de datos Javascript que queremos enviar a PHP

Comencemos viendo cómo podría ser nuestra estructura de datos, que tenemos en Javascript y queremos pasar a PHP. La duda del usuario era sobre cómo enviar un array bidimiensional, por lo que vamos a utilizar esa misma estructura de datos. Se trata de un array de 2 dimensiones, con datos de diversos países del mundo.

var datosPaises = [
   [
      "España",
      "Madrid",
      42000000,
      "Euro"
   ],
   [
      "Francia",
      "París",
      63500000,
      "Euro"
   ],
   [
      "Brasil",
      "Brasilia",
      195000000,
      "Real"
   ],
   [
      "Marruecos",
      "Rabat",
      34000000,
      "Dirham"
   ],
   [
      "India",
      "Nueva Delhi",
      1000000000,
      "Rupia"
   ]
];

Convertir esa estructura de datos en un string con notación JSON

Este paso es extremadamente sencillo cuando usamos un framework como Mootools, ya que dispone de una función que nos hace todo el trabajo por nuestra cuenta.

var miJSON = JSON.encode(datosPaises);

Con esto consigo una variable llamada "miJSON" que tiene una cadena de caracteres con el array definido en JSON.

Enviar los datos por Ajax a una página PHP

Ahora viene la parte más interesante, en la que creamos la solicitud Ajax y enviamos los datos a PHP. Esto se hace con la clase Request de Mootools. A continuación podemos ver el Javascript necesario para generar una conexión Ajax y definir funciones tanto para cuando se realice con éxito como con fracaso.

var miAjax = new Request({
   url: "recibo-json.php",
   data: "datos=" + miJSON,
   onSuccess: function(textoRespuesta){
      $('resultado').set("html", textoRespuesta);
   },
   onFailure: function(){
      $('resultado').set("html", "fallo en la conexión Ajax");
   }
})
miAjax.send();

Como se puede ver en el código, cuando se haya producido la respuesta del servidor, o el posible error de conexión si es que algo ha ido mal, se actualiza el HTML de un elemento con identificador id="resultado". Por ello, en el cuerpo de nuestra página deberemos tener ese elemento, con un código HTML como este:

<div id="resultado"></div>

Recibir los datos desde PHP y procesar el JSON

Ahora nos quedaría ver la parte de programación del lado del servidor con PHP. Esto no requiere muchos conocimientos, ya que PHP dispone de funciones para interpretar el JSON, que se han explicado en el artículo Consumir un JSON desde PHP.

Desde PHP deberemos recibir los datos enviados en la solicitud Ajax, decodificar el JSON y producir una salida, tal como necesitemos en nuestra aplicación web. Todo eso se puede ver en el siguiente código fuente.

<?php
if($_POST){
   //echo "recibo algo POST";
   
   //recibo los datos y los decodifico con PHP
   $misDatosJSON = json_decode($_POST["datos"]);
   
   //con esto podría mostrar todos los datos del JSON recibido
   //print_r($misDatosJSON);
   
   //ahora muestro algún dato de este array bidimiesional
   $salida = "";
   $salida .= "Capital de Francia: " . $misDatosJSON[1][1];
   $salida .= "<br>Nombre del país 1 (índice 0 del array): " . $misDatosJSON[0][0];
   $salida .= "<br>Nombre del país 3: " . $misDatosJSON[2][0];
   echo $salida;
}else{
   echo "No recibí datos por POST";
}
?>

Conclusión

Hemos visto una manera de comunicar desde un script Javascript en el cliente, hacia un script PHP en el servidor, enviando datos más o menos complejos como puede ser un array bidimensional, aunque el mismo proceso nos serviría para enviar estructuras de datos incluso más complejas como pueden ser los objetos.

El procedimiento relatado aquí se ha hecho de manera general, por lo que cada uno podría adaptar esas técnicas para realizar por su cuenta comunicaciones desde Javascript a PHP, tal como sus aplicaciones web lo estén requiriendo.

El ejemplo en marcha puede verse en una página aparte.

El código fuente de este ejemplo, tanto los archivos Javascript como el PHP, podemos encontrarlo en un ZIP que ofrecemos para descarga.