PHP y JSON. Si queréis saltaros la explicación, podéis ir directamente al ejemplo.

Nota: Para continuar con este tutorial deberías tener conocimientos básicos de PHP y jQuery.

¿Qué es Ajax y que es JSON?

Ajax son las siglas de Asynchronous jаvascript 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. jаvascript 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 jаvascript 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 (jаvascript 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
    dаta: {"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({
    dаta: {"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 : 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 s. 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.

Base de datos

Primero preparamos una tabla dónde vamos a tener los datos de los s. Para ello entra en phpMy o similar y ejecuta esta consulta para crear la tabla «cyb_s» con las columnas ID, name, email y url.

CREATE TABLE IF NOT EXISTS `cyb_s` (
  `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `name` 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 s de ejemplo:

INSERT INTO `cyb_s` (`ID`, `name`, `email`, `url`) VALUES
(1, 'Paco', '[email protected]', 'http://miblog.name'),
(2, 'Juan', '[email protected]', 'http://www.misitio.com'),
(3, 'Ana', '[email protected]', 'http://tusitio.com');

El JSON con el que vamos a trabajar tiene la siguiente estructura:

{
    "success" : true|false,
    "data"    : {
        "message" : "",
        "s"   : [{
            "ID"      : "",
            "name" : "",
            "email"    : "",
            "url"      : ""
        }, {...} ]
    }
}

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-="1">Dame los datos de la persona con ID = 1</button> - <button data-="[1,2,3]">Dame los datos de las personas con ID = 1, ID = 2 e ID = 3.</button> - <button data-="0">Ningún </button></div>
  <div id="response-container"></div>
</body>
</html>

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-.....
    $('[data-]').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('') obtenemos el valor del atributo data- de dicho elemento y lo pasamos a la función getdetails definida anteriormente
        getdetails( $(this).data('') )
        
        .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 
                $.each(response.data.s, function(key, value) {
                    
                    output += "<h2>Detalles del  " + value['ID'] + "</h2>";
                    
                    // recorremos los valores de cada 
                    $.each(value, function(key, value) {
                        
                        output += '<ul>';
                        output += '<li>' + key + ': ' + value + "</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);
            
        });
        
    });
    
});

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 s solicitados y devolverá el resultado en formato JSON. En las líneas 12 – 15 debes poner los datos de 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";
  $db = "_basededatos";
  $ = "_basededatos";
  $dbname = "nombre_basededatos";
 
  $database = new mysqli($dbserver, $db, $, $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_s` " . $querywhere ) ) {

  if( $result->num_rows > 0 ) {

    $jsondata["success"] = true;
    $jsondata["data"]["message"] = sprintf("Se han encontrado %d s", $result->num_rows);
    $jsondata["data"]["s"] = array();
    while( $row = $result->fetch_object() ) {
       //$jsondata["data"]["s"][] 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 php.net/manual/es/function.json-encode.php para más info
       $jsondata["data"]["s"][] = $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();

Descarga el ejemplo de AJAX con jQuery, JSON y PHP