Ajax con jQuery, JSON y PHP: ejemplo paso a paso Ajax, jQuery y PHP es una combinación de las que molan. Te permite, con relativamente poco esfuerzo, crear aplicaciones interactivas, dinámicas y atractivas. Y si añadimos JSON como formato de intercambio de datos la cosa aún se pone mejor. En este tutorial vamos a ver un pequeño ejemplo, explicado paso a paso, de todo esto junto y funcionando: jQuery, Ajax, PHP y JSON. ¿Qué es Ajax y que es JSON? Ajax son las siglas de Asynchronous JavaScript And XML y es una tecnología que permite a una página web actualizarse de forma dinámica sin que tenga que recargarse completamente. JavaScript es el encargado de comunicarse con el servidor enviando y recibiendo datos desde la página web, en el servidor la solicitud es procesada y se envía una respuesta que es interpretada de nuevo por JavaScript en la página web. Aunque con Ajax se puede solicitar cualquier tipo de recurso web, el intercambio de datos entre la página web y el servidor ha sido realizado tradicionalmente, como el propio nombre indica, en formato XML (eXtensible Markup Language), un lenguaje de marcas que permite definir una gramática específica y, por tanto, permite el intercambio de información estructurada y legible. Y llegó JSON (JavaScript Object Notation), más ligero y con una notación más simple, y se convirtió en el formato más utilizado para el intercambio de datos cuándo se trabaja con Ajax. Además, con una ligera variación (JSONP) puede utilizarse en solicitudes Ajax entre diferentes dominios (cross-domain). El formato JSON tiene la siguiente notación: {key : value, key2 : value2, key3 : value3,...} Y también puede ser serializado y multidimensional, por ejemplo: [{key : value, key2 : value2, key3 : value3, key : { key : value, key2 : value2, key3 : value3} },{key : value, key2 : value2, key3 : value3,...}] Puedes ver todas las especificaciones del formato JSON json.org. JSON en PHP : En cualquier instalación estándar de PHP, desde la versión 5.2.0, se incorpora de forma predeterminada la extensión JSON y es muy fácil pasar los datos de un array a notación en JSON. Aunque si no se cuenta con esta extensión se puede construir la notación JSON de forma manual, es recomendable tenerla si vas a trabajar de forma frecuente con datos en formato JSON. Entre las funciones de la extensión JSON para PHP que nos interesan, la más imprescindible es la función json_encode(). Con esta función podemos pasar nuestros datos a formado JSON rápida y fácilmente. Sólo es necesario tener los datos en forma de array u objeto. Por ejemplo:
Ajax con JSON y jQuery Uno de los argumentos del método jQuery.ajax() es dataType y aquí podemos especificar que vamos a utilizar datos JSON en la respuesta. Si no especificamos nada en dataType, jQuery intetará detectar de forma automática el formato de los datos recibidos. Si en la respuesta desde el servidor se especifica, como hicimos en el ejemplo anterior, el tipo de contenido, será más fácil para jQuery tratar los datos correctamente. Utilizando jQuery.ajax() tendría un aspecto similar a: $.ajax({ // En data puedes utilizar un objeto JSON, un array o un query string data: {"parametro1" : "valor1", "parametro2" : "valor2"}, //Cambiar a type: POST si necesario type: "GET", // Formato de datos que se espera en la respuesta dataType: "json", // URL a la que se enviará la solicitud Ajax url: "script.php", }) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "La solicitud a fallado: " + textStatus); } }); Además del método anterior, podemos utilizar el atajo getJSON(), que quedaría de esta forma para hacer exactamente lo mismo: $.getJSON( "script.php", { "parametro1" : "valor1", "parametro2" : "valor2" } ) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "Algo ha fallado: " + textStatus" ); } }); Ten en cuenta que .getJSON(), como su nombre indica, siempre hace una solicitud con el método GET, si necesitas enviar la solicitud mediante método POST tendrás que utilizar otras funciones de jQuery como .ajax() con el argumento type puesto a POST o su alias .post(). Por ejemplo: $.ajax({ data: {"parametro1" : "valor1", "parametro2" : "valor2"}, type: "POST", dataType: "json", url: "script.php", }) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "La solicitud a fallado: " + textStatus);

} }); //Equivalente a lo anterior $.post( "script.php", { "parametro1" : "valor1", "parametro2" : "valor2" }, null, "json" ) .done(function( data, textStatus, jqXHR ) { if ( console && console.log ) { console.log( "La solicitud se ha completado correctamente." ); } }) .fail(function( jqXHR, textStatus, errorThrown ) { if ( console && console.log ) { console.log( "La solicitud a fallado: " + textStatus); } }); En el ejemplo PHP anterior, en el objeto JSON había dos miembros: success y message. Un posible objeto JSON recibido podría ser el siguiente: {"success" : true, "message" : "Hola! El valor recibido es correcto."} Este objeto es recibido en el método .done() a través del argumento data y podemos acceder al valor de cada miembro del objeto JSON del siguiente modo: .done( function(data) { data.success; data.message; });

Ejemplo paso a paso Vamos a ver un ejemplo en el que vamos a realizar una solicitud ajax a un script PHP que interaccionará con una base de datos para buscar los registros de unos hipotéticos usuarios. El ejemplo lo he elaborado para cubrir varias posibilidades, entre ellas que se solicite sólo un registro de la base de datos o varios. 1- Base de datos Primero preparamos una tabla dónde vamos a tener los datos de los usuarios. Para ello entra en phpMyAdmin o similar y ejecuta esta consulta para crear la tabla “cyb_users” con las columnas ID, username, email y url. CREATE TABLE IF NOT EXISTS `cyb_users` ( `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL DEFAULT '', `email` varchar(100) NOT NULL DEFAULT '', `url` varchar(100) NOT NULL DEFAULT '', PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=3; Y luego creamos estos usuarios de ejemplo: INSERT INTO `cyb_users` (`ID`, `username`, `email`, `url`) VALUES (1, 'Paco', '[email protected]', 'http://miblog.name'), (2, 'Juan', '[email protected]', 'http://www.misitio.com'), (3, 'Ana', '[email protected]', 'http://lawebdeana.com'); El JSON con el que vamos a trabajar tiene la siguiente estructura: { "success" : true|false, "data" : { "message" : "", "users" : [{ "ID" : "", "username" : "", "email" : "", "url" : "" }, {...} ] } }

2- El HTML

<meta charset="utf-8"> <script src="//code.jquery.com/jquery-latest.js"> <script src="miscript.js">

3- jQuery: miscript.js $(document).ready(function() { // getdeails será nuestra función para enviar la solicitud ajax var getdetails = function(id) { return $.getJSON("personas.php", { "id": id }); } // Al hacer click sobre cualquier elemento que tenga el atributo data-user..... $('[data-user]').click(function(e) { // Detenemos el comportamiento normal del evento click sobre el elemento clicado e.preventDefault(); // Mostramos texto de que la solicitud está en curso $("#response-container").html("

Buscando...

"); // this hace referencia al elemento que ha lanzado el evento click // con el método .data('user') obtenemos el valor del atributo data-user de dicho elemento y lo pasamos a la función getdetails definida anteriormente getdetails( $(this).data('user') ) .done(function(response) { //done() es ejecutada cuándo se recibe la respuesta del servidor. response es el objeto JSON recibido if (response.success) { var output = "

" + response.data.message + "

"; // recorremos cada usuario $.each(response.data.users, function(key, value) { output += "

Detalles del usuario " + value['ID'] + "

"; // recorremos los valores de cada usuario $.each(value, function(userkey, uservalue) { output += '

'; output += '
• ' + userkey + ': ' + uservalue + "
"; output += '

'; }); }); // Actualizamos el HTML del elemento con id="#response-container" $("#response-container").html(output); } else { //response.success no es true $("#response-container").html('No ha habido suerte: ' + response.data.message); } }) .fail(function(jqXHR, textStatus, errorThrown) { $("#response-container").html("Algo ha fallado: " + textStatus); }); }); });

4- PHP: personas.php Este es el script PHP que se encargará de procesar la soclitud Ajax, consultará a la base de datos en busca de los detalles de los usuarios solicitados y devolverá el resultado en formato JSON. En las líneas 12 – 15 debes poner los datos de acceso a tu base datos. connect_errno) { die("No se pudo conectar a la base de datos"); } $jsondata = array(); //Sanitize ipnut y preparar query if( is_array($id) ) { $id = array_map('intval', $id); $querywhere = "WHERE `ID` IN (" . implode( ',', $id ) . ")"; } else { $id = intval($id); $querywhere = "WHERE `ID` = " . $id; } if ( $result = $database->query( "SELECT * FROM `cyb_users` " . $querywhere ) ) { if( $result->num_rows > 0 ) { $jsondata["success"] = true; $jsondata["data"]["message"] = sprintf("Se han encontrado %d usuarios", $result->num_rows); $jsondata["data"]["users"] = array(); while( $row = $result->fetch_object() ) { //$jsondata["data"]["users"][] es un array no asociativo. Tendremos que utilizar JSON_FORCE_OBJECT en json_enconde //si no queremos recibir un array en lugar de un objeto JSON en la respuesta //ver http://www.php.net/manual/es/function.json-encode.php para más info $jsondata["data"]["users"][] = $row; } } else { $jsondata["success"] = false; $jsondata["data"] = array( 'message' => 'No se encontró ningún resultado.' ); } $result->close(); } else { $jsondata["success"] = false; $jsondata["data"] = array( 'message' => $database->error ); } header('Content-type: application/json; charset=utf-8'); echo json_encode($jsondata, JSON_FORCE_OBJECT); $database->close(); } exit();