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:

<?php
$jsondata = array();
if( isset($_GET['param']) ) {
if( $_GET['param'] == 'valor' ) {
$jsondata['success'] = true;
$jsondata['message'] = 'Hola! El valor recibido es correcto.';
} else {
$jsondata['success'] = false;
$jsondata['message'] = 'Hola! El valor recibido no es correcto.';
}
//Aunque el content-type no sea un problema en la mayoría de casos, es recomendable especificarlo
header('Content-type: application/json; charset=utf-8');
echo json_encode($jsondata);
exit();
}
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', 'thisismy@email.com', 'http://miblog.name'),
(2, 'Juan', 'elcorreode@juan.com', 'http://www.misitio.com'),
(3, 'Ana', 'escribrea@ana.com', '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
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="miscript.js"></script>
</head>
<body>
<div><button data-user="1">Dame los datos de la persona con ID = 1</button> - <button data-user="[1,2,3]">Dame
los datos de las personas con ID = 1, ID = 2 e ID = 3.</button> - <button data-user="0">Ningún usuario</button></div>
<div id="response-container"></div>
</body>
</html>

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("<p>Buscando...</p>");
// 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 = "<h1>" + response.data.message + "</h1>";
// recorremos cada usuario
$.each(response.data.users, function(key, value) {
output += "<h2>Detalles del usuario " + value['ID'] + "</h2>";
// recorremos los valores de cada usuario
$.each(value, function(userkey, uservalue) {
output += '<ul>';
output += '<li>' + userkey + ': ' + uservalue + "</li>";
output += '</ul>';
});
});
// 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.
<?php
if( isset($_GET['id']) ) {
get_persons($_GET['id']);
} else {
die("Solicitud no válida.");
}
function get_persons( $id ) {
//Cambia por los detalles de tu base datos
$dbserver = "localhost";
$dbuser = "usuario_basededatos";
$password = "password_basededatos";
$dbname = "nombre_basededatos";
$database = new mysqli($dbserver, $dbuser, $password, $dbname);
if($database->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();