|
Opinión de efxto "@Kompañero, no conozco nada TOMCAT y casi nada de Java (Sun Microsystems) que es para lo que se h..." |
|
Opinión de Kompañero "Jeje los que sepan de esto se van a reír, no me funcionaba por que estaba intentando correrlo con..." |
|
Opinión de Kompañero "Una pregunta: ¿Debo modificar algo al código del array_rand para que funcione? Lo copie y pegue e..." |
"Excelente página! cantidad de información relevante, cartas, menús y opiniones de otros usuarios...." |
|
Opinión de Fiorella "Muchas gracias por esta explicación, me fue de mucha ayuda. Saludos. Fiorella" |
Ajax con jquery, php y json - Ejemplo paso a paso
27 Agosto , 2010
No hay duda que la combinación de javascript, ajax y php es una de las mejores a la hora de ofrecer contenido dinámico, interactivo y atractivo. En otra ocasión escribí sobre la realización de una aplicación ajax utilizando la librería xajax que facilita, y mucho, el trabajo. En esta ocasión escribiré sobre el desarrollo de una aplicación ajax con jquery. Si xajax era fácil de usar, el uso de jquery no es menos sencillo además de aportar una fácil codifciación de javascript para efectos visuales que animen la presentación de los resultados. En un archivo php realizaremos las acciones a llevar a cabo en el servidor como consultas a la base de datos y devolveremos los resultados utilizando json como lenguaje de intercambio de datos. Json son las siglas de JavaScript Object Notation y es un formato muy ligero de intercambio de datos de uso muy simple, motivo por el que se ha hecho muy popular su uso en aplicaciones ajax. Como formato de intercambio de datos tiene sus ventajas e incovenientes respecto al uso de XML pero en eso no nos vamos a meter en este artículo. Para ofrecer los resultados en formato json utilizando php es necesario instalar la extensión php json, desde la versión php 5.2.0 json se incluye por defecto en cualquier instalación de php. El archivo php y jsonEl archivo php que usaremos para procesar la información en el servidor devolverá los datos en formato json. En el código php de este archivo tomamos los valores de los parámetros de la url para realizar la acción necesaria y devolvemos los datos en formato json usando json_enconde. $dato = $_GET['parametro']; $dato2 = $_GET['parametro2']; if($dato == "valor") { process($dato); } function process($dato) { $resultado = hacer algo con el dato; if($resultado_satisfactorio) { $jsondata['mensaje'] = "mensaje de exito"; $jsondata['resultado'] = "resultado"; } else { $jsondata['mensaje'] = "mensaje de error"; } echo json_encode($jsondata); } El código ajax con jqueryEl código javascript para realizar una llamada ajax con jquery es realmente sencillo. En el ejemplo que pongo a continuación se específica que se realizará la solicitud ajax al hacer clic en el elemento con id="id" y sólo se activará una vez que el documento está listo en el lado del cliente. Al hacer clic en dicho elemento se pone en marcha la solicitud al servidor a través del archivo php especificado en el parametro "url"; las variables según las cuales realizaremos una acción u otra en el archivo php que nos devuelve la información desde el servidor se especifican en el parámetro "data". Si hay éxito en la solicitud se llama a la función function(data) especificada en "success". Nota que establecemos el tipo de datos como json y el tipo de solicitud en GET. (código probado con jquery versión 1.4.2). $(document).ready(function(){ $("#id").click(function(){ $.ajax({ data: "parametro1=valor1¶metro2=valor2", type: "GET", dataType: "json", url: "url_archivo_php", success: function(data){ alguna_funcion_a_realizar_segun_resultados; } }); }); }); En nuestro ejemplo pusimos dos datos en formato json, mensaje y resultados, que procesaremos con jquery. Para obtener el valor de estos datos por separado usamos las variables data.mensaje y data.resultado en el código jquery. Sencillo, ¿verad? Podéis ver un ejemplo real en el plugin scontent para joomla que recien he publicado en versión Beta. Descarga el archivo y echale un vistazo al código. Leer opiniones (0) |
|
|