Ajax con jquery, php y json - Ejemplo paso a paso

Portada

Tecnología

Programación

Detalles: Categoría: Programación; Última actualización el Miércoles, 07 Diciembre 2011 09:54; Escrito por cybnet; Visto: 35070

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 formato json tiene la siguiente notación:

{key : value, key2 : value2, key3 : value3,...}

El archivo php y json

El 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_encode.

<?php
$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 jquery

El 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 parámetro "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, 1.6.4 y 1.7.1).

$(document).ready(function(){
$("#id").click(function(){
  $.ajax({
    data: "parametro1=valor1&parametro2=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.

Veamos un ejemplo de interacción con una base de datos mysql. Supongamos que tienes una tabla en tu base de datos llamada "casas" en la que almacenas información sobre viviendas, cada una de ellas identificada con un número llamado "id". Los campos de esta tabla son:

id: número identificador de la casa
m2: metros cuadrados de la vivienda
hab: número de habitaciones
direccion: dirección donde está ubicada la casa

Sigamos haciendo suposiciones y supongamos que quieres obtener, via ajax, los datos de una vivienda. Utilizaremos para ello el id identificador de cada casa.

1. El HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
  <head>
  <meta http-equiv="content-type" content="text/html" charset="utf-8" />
   <script type="text/javascript" src="/js/jquery-1.6.4_min.js"></script>
   <script type="text/javascript" src="/js/ajax.js"></script>
  </head>
  <body>
   <a href="#" id="myid">Detalles casa 2</a>
   <div class="info"></div>
  </body>
</html>

2. El código ajax con jQuery

Un ejemplo sería el siguiente que hemos incluido el archivo ajax.js llamado en el código html puesto unas líneas más arriba.

function restults(data) {
     $("div.info").show();
     $("div.info").append("ID: "+data.id);
     $("div.info").append("M2: "+data.m2);
     $("div.info").append("Habitaciones: "+data.hab);
     $("div.info").append("Localización: "+data.direccion);
 }
$(document).ready(function(){
$("#myid").click(function(){
  $.ajax({
    data: "id=2",
    type: "GET",
    dataType: "json",
    url: "casas.php",
    success: function(data){
       restults(data);
     }
   });
  });
});

La llamada ajax se activa al hacer clic en el elemento de id="myid". El archivo de procesamiento en el servidor es llamado casas.php y el parámetro pasado es el id de la casa, en el ejemplo 2.

En caso de éxito, se mostrarán los datos en un un div de clase "info" que inicialmente podemos tener escondido (p.e. style="display: none").

Nota que los datos json obtenidos son id, m2, hab y direccion, accesibles de forma individual a través de data.id, data.m2, data.hab y data.direccion.

2. El archivo casas.php

El archivo casas.php recibirá los datos pasados por la llamada ajax desde jQuery, este caso la id=2. Realizará la consulta a la tabla "casas" y devolverá la información relativa a la vivienda seleccionada en formato de datos json. Un ejemplo podría ser el siguiente:

<?php
(int) $id = $_GET['id'];
if($id > 0) {
   process($id);
  }
 
function process($id) {
   $db = mysql_connect('mysql_server', 'mysql_user', 'mysql_password');
   if (!$db) {
     die('Could not connect: ' . mysql_error());
    }
   if (!mysql_select_db('nombre_base_datos')) {
     die('Could not select database: ' . mysql_error());
    }   
   $result = mysql_query("SELECT * FROM casas WHERE id=".$id);
   if (!$result) {
     die('Could not query:' . mysql_error());
    }
 
   $row = mysql_fetch_object($result);
   $jsondata['id'] = $row->id;
   $jsondata['m2'] = $row->m2;
   $jsondata['hab'] = $row->hab;
   $jsondata['direccion'] = $row->direccion;
 
   echo json_encode($jsondata);
   mysql_close($db);
 }
?>

Descarga el ejemplo de ajax con jquery, php y json (con jQuery 1.6.4). (recuerda cambiar "mysql_server" por el servidor de la base de datos, a menudo localhost, "mysql_user" por el nombre de usuario de acceso a la base de datos, "mysql_password" por la contraseña y "nombre_base_datos" por el nombre de la base de datos y haber creado la tabla "casas" en dicha base de datos con las columnas id, m2, hab y direccion, y crear una entrada en esta tabla para la casa con id=2 para que el ejemplo funcione).

Ajax con jquery y json con varios registros

Sois muchos los que me habéis preguntado en los comentarios como se haría para hacer funcionar el ajax con jquery, php y json cuándo existen varios registros devueltos desde la base de datos. Así pues vamos a ver un ejemplo. Aunque puede haber varias soluciones, yo he elegido para el ejemplo la serialización del json para cada registro.

Supongamos el mismo ejemplo anterior pero en lugar de ver los detalles de una casa en concreto, el script va a buscar registros en la base de datos según un criterio, por ejemplo, todos los registros de casas que tenga 90m². Como es de esperar, lo más seguro es que nos devuelva más de un registro. En este caso, los datos json serán serializados; el código json devuelto por el script php y recibido por jQuery tendrá esta pinta:

[{key : value, key2 : value2, key3 : value3,...},{key : value, key2 : value2, key3 : value3,...}]

Para analizar el código json recibido con jQuery vamos a utilizar un bucle foreach, que en jQuery se puede tratar directamente con la función $.each().

1. El html

El html será muy similar al de antes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
  <head>
  <meta http-equiv="content-type" content="text/html" charset="utf-8" />
   <script type="text/javascript" src="/jquery.js"></script>
   <script type="text/javascript" src="/ajax.js"></script>
  </head>
  <body>
   <a href="#" id="myid">Casas de 90 metros cuadrados</a>
   <div class="info"></div>
  </body>
</html>

2. El script php

El código php cambia un poco, para poder recibir todos los registros encontrados en la base de datos, codificarlos en formato json y serializar el json de cada registro.

<?php
(int) $metros = $_GET['metros'];
if($metros > 0) {
   process($metros);
  }
 
function process($metros) {
   $db = mysql_connect('mysql_server', 'mysql_user', 'mysql_password');
   if (!$db) {
     die('Could not connect: ' . mysql_error());
    }
   if (!mysql_select_db('nombre_base_datos')) {
     die('Could not select database: ' . mysql_error());
    }   
   $result = mysql_query("SELECT * FROM casas WHERE m2=".$metros);
   if (!$result) {
     die('Could not query:' . mysql_error());
    }
   $jsondata = array();
   $i = 0;
   while ($row = mysql_fetch_assoc($result)) {
     $jsondata[$i]['id'] = $row['id'];
     $jsondata[$i]['m2'] = $row['m2'];
     $jsondata[$i]['hab'] = $row['hab'];
     $jsondata[$i]['direccion'] = $row['direccion'];
     $i++;
  }
   echo json_encode($jsondata);
   mysql_close($db);
 }
?>

3. El código jquery

Observa como la principal diferencia con el código jQuery del primer ejemplo es el uso de la función jQuery each() para procesar la serie de datos json recibidos desde el servidor:

function restults(data) {
     $("div.info").html('').show();
     $.each(data,function(index,value) {
       $("div.info").append("<div class=\"resultado\">");
       $("div.info").append("ID: "+data[index].id);
       $("div.info").append("M2: "+data[index].m2);
       $("div.info").append("Habitaciones: "+data[index].hab);
       $("div.info").append("Localización: "+data[index].direccion);
       $("div.info").append("</div>");
     });
 }
$(document).ready(function(){
$("#myid").click(function(){
  $.ajax({
    data: "metros=90",
    type: "GET",
    dataType: "json",
    url: "casas.php",
    success: function(data){
       restults(data);
     }
   });
  });
});

Descarga el ejemplo de ajax con jquery, php y json con varios registros y json serializado (con jQuery 1.7.1). (recuerda cambiar "mysql_server" por el servidor de la base de datos, a menudo localhost, "mysql_user" por el nombre de usuario de acceso a la base de datos, "mysql_password" por la contraseña y "nombre_base_datos" por el nombre de la base de datos y haber creado la tabla "casas" en dicha base de datos con las columnas id, m2, hab y direccion, y crear varias entradas en esta tabla que tenga el valor 90 en la columna m2).

Igual te interesa también: ajax con php, jquery y xml.

Ten en cuenta que este artículo solo representa un ejemplo para ver como funciona la interacción con ajax utilizando jquery y el lenguaje json, no pretende ser una solución para un sitio en producción.

+25

+1 -1 Cita Reportar