Buscar

Portada

Monotematicos

Secciones

Blogging

Comunidad

Wiki

RSS

Usuarios: Login | Registro

DesarrolloWeb.com > Manuales > Trabajar con JSON desde PHP / Taller de Mootools

Envo de datos desde Javascript a PHP utilizando JSON con Mootools

Anuncios Google
01 de August de 2011 Compartir en redes sociales

Manuales relacionados
Trabajar con JSON desde PHP (6 artculos)
Ver el ndice del manual

JavaScript

Ajax Framework
Valoracin del artculo: 0 votos Enviar un comentario

Ajax No JavaScript

Descargar el manual

Cmo enviar informacin, con estructuras de datos complejas, desde Javascript a PHP por medio de JSON. Utilizaremos Ajax y el framework Javascript Mootools para facilitarnos las cosas.
Por Miguel Angel Alv arez
Seguir a @alvarezmiguelan

Taller de Mootools (15 artculos)

Ver el ndice del manual Descargar el manual

Categorias relacionadas
PHP Frameworks Javascript

A raz de una duda de un usuario publicada en las discusiones de DesarrolloWeb.com he realizado un pequeo script para realizar comunicacin de datos complejos desde Javascript a PHP. Para esta transferencia de informacin lo ms cmodo que resulta es utilizar JSON, ya que es una notacin que entienden tanto Javascript como PHP. A lo largo del Manual de JSON para PHP habamos tratado ya diversos ejemplos de comunicacin de datos entre PHP y Javascript, pero revisando el texto con calma veo que no hemos hecho ningn ejemplo sobre cmo realizar el paso contrario, es decir, enviar los datos de Javascript hacia PHP. La transferencia de esa informacin se podra hacer de diversas maneras, pero creo que lo ms cmodo sera hacer una conexin Ajax desde Javascript, enviando los datos en notacin JSON hacia una pgina PHP. Tanto para utilizar Ajax con comodidad, como para generar el JSON, es interesante utilizar algn framew ork Javascript que nos facilite las tareas, por lo que en este ejemplo veremos cmo 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 podrs dominar. Tambin se podra utilizar otros frameworks como jQuery para realizar este ejercicio. Yo he elegido Mootools porque conozco varias de sus funciones para tratamiento de JSON.

El autor
Miguel Angel Alvarez Director de DesarrolloWeb.com http://www.desarrolloweb.com

ltimas noticias
AppJS, crea aplicaciones de escritorio con HTML, CSS y... Interesante herramienta con la que crear apps de escritorio con algunas de las principales...

Estructura de datos Javascript que queremos enviar a PHP

Comencemos viendo cmo podra ser nuestra estructura de datos, que tenemos en Javascript y queremos pasar a PHP. La duda del usuario era sobre cmo 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 pases del mundo. var datosPaises = [ [ "Espaa", "Madrid", 42000000, "Euro" ], [ "Francia", "Pars", 63500000, "Euro" ], [ "Brasil", "Brasilia", 195000000, "Real" ], [ "Marruecos", "Rabat", 34000000, "Dirham" ],

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo econmico...

converted by Web2PDFConvert.com

[ "India", "Nueva Delhi", 1000000000, "Rupia" ] ];

Convertir esa estructura de datos en un string con notacin JSON

Este paso es extremadamente sencillo cuando usamos un framew ork como Mootools, ya que dispone de una funcin 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 funcin JSON.encode() de Mootools podra tambin 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 pgina PHP

Ahora viene la parte ms interesante, en la que creamos la solicitud Ajax y enviamos los datos a PHP. Esto se hace con la clase Request de Mootools. A continuacin podemos ver el Javascript necesario para generar una conexin 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 conexin Ajax"); } }) miAjax.send();
Nota: El script anterior puede parecer poco claro, pero estoy seguro que todo aquel que se haya ledo la parte de Ajax en el Manual de Mootools podr entenderlo. En concreto os recomiendo leer los artculo Trabajar con la clase Request de Mootools.

Como se puede ver en el cdigo, cuando se haya producido la respuesta del servidor, o el posible error de conexin 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 pgina deberemos tener ese elemento, con un cdigo HTML como este: <div id="resultado"></div>

Recibir los datos desde PHP y procesar el JSON

Ahora nos quedara ver la parte de programacin 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 artculo 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 aplicacin w eb. Todo eso se puede ver en el siguiente cdigo fuente. <?php if($_POST){ //echo "recibo algo POST"; //recibo los datos y los decodifico con PHP $misDatosJSON = json_decode($_POST["datos"]); //con esto podra mostrar todos los datos del JSON recibido //print_r($misDatosJSON); //ahora muestro algn dato de este array bidimiesional $salida = ""; $salida .= "Capital de Francia: " . $misDatosJSON[1][1]; $salida .= "<br>Nombre del pas 1 (ndice 0 del array): " . $misDatosJSON[0][0]; $salida .= "<br>Nombre del pas 3: " . $misDatosJSON[2][0]; echo $salida; }else{ echo "No recib datos por POST"; } ?>

converted by Web2PDFConvert.com

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 conversin de caracteres, si es que estamos trabajando con otras codificaciones como ISO-8859-1. Si ves que algunos caracteres de tu salida PHP se estn viendo incorrectamente, prueba a convertirlos a UTF-8 desde PHP. Otra posibilidad es guardar directamente tu archivo PHP con codigicacin UTF-8, desde tu propio editor de texto.

Conclusin
Hemos visto una manera de comunicar desde un script Javascript en el cliente, hacia un script PHP en el servidor, enviando datos ms o menos complejos como puede ser un array bidimensional, aunque el mismo proceso nos servira para enviar estructuras de datos incluso ms complejas como pueden ser los objetos. El procedimiento relatado aqu se ha hecho de manera general, por lo que cada uno podra adaptar esas tcnicas para realizar por su cuenta comunicaciones desde Javascript a PHP, tal como sus aplicaciones w eb lo estn requiriendo. El ejemplo en marcha puede verse en una pgina aparte. El cdigo fuente de este ejemplo, tanto los archivos Javascript como el PHP, podemos encontrarlo en un ZIP que ofrecemos para descarga.

My SQL Development Tools

Admin. Dev. Queries. Sync. Debug. Download dbForge My SQL Studio!
Devart.com /My_SQ L_Studio

4
Tweet

9
Recommend

Compartir en redes sociales

Enviar un comentario a este artculo

MANUAL: Trabajar con JSON desde PHP

Generar un JSON desde PHP para un campo autocomplete de jQuery UI

MANUAL: Taller de Mootools

Slide de imgenes Mootools

Secciones principales Manuales FAQs Programas Directorio Directorio de scripts Videos

Monotemticos Desde cero HTML, C SS, Diseo Javascript, Ajax ASP, PHP Promocion, Ganar dinero

Bloging Actualidad Recursos interesantes Agenda

Comunidad Perfiles pblicos Desarrolladores Vuestras pginas Registro Encuestas

C opyright | Publicidad | Acerca de | Datos legales | C ontacta

converted by Web2PDFConvert.com