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

  • Por
Cómo enviar información, con estructuras de datos complejas, desde Javascript a PHP por medio de JSON. Utilizaremos Ajax y el framework Javascript Mootools para facilitarnos las cosas.
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.

Nota: En DesarrolloWeb.com hemos publicado tanto un Manual de Mootools como un Taller de Mootools, por lo que si no conoces el framework con un poquito de estudio lo podrás dominar. También se podría utilizar otros frameworks como jQuery para realizar este ejercicio. Yo he elegido Mootools porque conozco varias de sus funciones para tratamiento de JSON.

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.

Nota: En este ejemplo hemos convertido un array a JSON, pero la función JSON.encode() de Mootools podría también convertir una estructura de datos de tipo objeto, de la misma sencilla manera que hemos visto para el array.

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();

Nota: El script anterior puede parecer poco claro, pero estoy seguro que todo aquel que se haya leído la parte de Ajax en el Manual de Mootools podrá entenderlo. En concreto os recomiendo leer los artículo Trabajar con la clase Request de Mootools.

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";
}
?>

Nota: Algo con lo que tendremos que lidiar cuando trabajamos con Ajax es el juego de caracteres de nuestros scripts. Las conexiones Ajax trabajan con UTF-8 por defecto, por lo que igual nos toca hacer alguna conversión de caracteres, si es que estamos trabajando con otras codificaciones como ISO-8859-1. Si ves que algunos caracteres de tu salida PHP se están viendo incorrectamente, prueba a convertirlos a UTF-8 desde PHP. Otra posibilidad es guardar directamente tu archivo PHP con codigicación UTF-8, desde tu propio editor de texto.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pablo Martinez

04/3/2016
Prueba
Buenas.
Baje el fuente y me da fallo en la conexion ajax con google crome. Se te ocurre porque?
Gracias de antemano.
Si puedes responderme mejor por correo.
Salud.

uriel

22/8/2016
formulario json firebase
Hola que buenos ejemplos

quisiera un ejemplo en el cual maneje un formulario normal y los datos de dicho formulario poder transformarlos a JSON e introducirlos en una base de datos como por ejemplo firebase.

Santiago

22/12/2016
Ayuda
Tengo un combobox cargado por un while con nombres traídos desde la base de datos pero su id no son los nombres sino la cédula, en el momento de seleccionar un nombre en el combobox, al lado del combobox tengo un input donde me trae la cédula que es el id, para poder traer la cédula tuve que emplear JS, la cédula queda como texto nada más, pero necesito obtener esa cédula para insertar en la base de datos... Espero haberme hecho entender... Hasta hace poco empecé en php y me ha tocado ocupar JS para facilidad del cliente que utilice el sistema