domingo, 24 de marzo de 2013

Tutorial Ajax con JSON, jQuery, PHP y mysql

En el siguiente tutorial vamos a crear una llamada Ajax utilizando objetos JSON, jquery, PHP y mysql. El objetivo es hacer una sencilla página en la cual tenemos una base de datos con 5 productos. Cargaremos en la página principal el nombre de esos 5 productos y al hacer click sobre cada uno de ellos, se producirá una llamada ajax que nos devolverá la descripción y precio del producto y nos lo escriba en pantalla.



Puedes ver el resultado de este ejemplo funcionando online haciendo click aqui (nueva ventana).



Vamos a ver a grandes rasgos como funciona: En la página principal hemos cargado todos los productos que teníamos en nuestra base de datos (5 en este caso). Cuando hagamos click sobre alguno de ellos se hará una llamada ajax que como parámetro enviará la idProducto:

La página datos.php recibirá ese parámetro y hará una consulta a la base de datos, seleccionando todos los campos del producto que tenga por id la recibida. Una vez haya hecho la consulta devolverá un objeto JSON con los datos:

Una vez recibidos los datos en el objeto JSON, ya podremos pintarlos en pantalla.

Esto puede llegar a ser muy útil. Por ejemplo: si tuviéramos una tienda con 500 categorías de productos y 50 productos en cada categoría sería una locura cargar 25000 productos, por lo que podríamos hacerlo mediante llamadas de ajax para cargar solo los productos de la categoría que el usuario quisiera ver.



Vamos a ver los archivos que hemos creado para este ejemplo de llamadas AJAX:

index.php


<html>
<head><title>Ejemplo Ajax con JSON, jQuery, PHP y mysql</title></head>

<link rel="stylesheet" href="estilos.css"/>
<script src="librerias/jquery/jquery-1.8.2.js"></script>
<script src="funciones.js"></script>
<?php
//Codigo por www.DesarrollarAplicaciones.com
$host = "localhost";
$usuario = "root";
$password = "root";
$db = "tienda";
//nos conectamos al host
$conexion = mysql_connect($host, $usuario, $password) or die("No se pudo conectar al host");
//nos conectamos a  la base de datos
mysql_select_db($db, $conexion) or die("No se pudo conectar a la base de datos");
//obtenemos todos los productos
$resultado = mysql_query("SELECT id, nombre FROM productos");
//vamos mostrando todos los productos en pantalla
while ($productos = mysql_fetch_assoc($resultado)) {
echo "<div id='" . $productos[id] . "' class='nombre_producto'>" . $productos[nombre] . "</div>";
echo "<div id='datos" . $productos[id] . "' class='datos_producto'></div><br/>";
}
?>
</html>

Lo que hacemos en el index es importar jquery, un archivo funciones.js y otro archivo, este de estilos, llamado estilo.css
Hacemos la conexión al host y la base de datos. Hacemos una consulta de todos los productos y cargamos el nombre de cada uno en un div. Este div tendrá como id el id del producto (que también es recuperado de la base de datos) y como clase nombre_producto. Creamos un segundo div donde se cargarán los datos del producto que tendrá como id datos + la id del producto.





funciones.js



$(document).ready(function(){
//Codigo por www.DesarrollarAplicaciones.com
$('.nombre_producto').click(function(){

//obtenemos la id del producto pinchado
var id=this.getAttribute('id');

//creamos el objeto con la id del producto
var datos = {
                idProducto : id
        }
     
//obtenemos el div sobre el que pinchamos
     var div=$('#'+id);  

//si el div no tiene la clase cargado, hacemos la llamada AJAX
if(!div.hasClass("cargado")){
$.ajax({
                data : datos,
                url : 'datos.php',
                global : false,
                type : "GET",
                dataType : "html",
                async : false
        }).done(function(resultado) {
        //decodificamos el objeto JSON recibido
        var datos_producto = JSON.parse(resultado);
        //seleccionamos el div para cargar los datos del producto seleccionado
        //lo hacemos mediante la clase: datos+id
        var divdatos=document.getElementById('datos'+datos_producto[0].id);
        divdatos.innerHTML="";
        divdatos.innerHTML+="Descripcion del producto: "+datos_producto[0].descripcion;
divdatos.innerHTML+="<br>Precio del producto: "+datos_producto[0].precio+" €<br/>";
     
        });

  }

  //añadimos la clase cargado al div para evitar hacer mas
  //llamadas AJAX iguales
   div.addClass("cargado");    
         });
 
});



En funciones .js:
Cada vez que se pinche en un div que tenga la clase nombre_producto obtendremos su id. Crearemos un objeto datos con un atributo llamado idProducto que tendrá como valor la id que hemos obtenido anteriormente. Hacemos la llamada de AJAX enviando el objeto datos a la página datos.php. Los datos que nos devuelva datos.php (un objeto JSON) lo trataremos en la función respuesta de ajax en la que descodificaremos el propio objeto JSON. Obtendremos el div que hay debajo del div nombre y en él pintaremos los datos del producto.





datos.php


<?php
$host="localhost";
$usuario="root";
$password="root";
$db="tienda";
$conexion=mysql_connect($host,$usuario,$password) or die ("No se pudo conectar al host");
mysql_select_db($db,$conexion) or die ("No se pudo conectar a la base de datos");
$id=$_GET["idProducto"];

$resultado=mysql_query("SELECT * FROM productos WHERE id='$id'");
$arrayProducto = array();
while ($productos=mysql_fetch_assoc($resultado)) {
        $arrayProducto[] = array_map('utf8_encode', $productos);
}
//enviamos el array como objeto JSON
echo json_encode($arrayProducto);
?>

datos.php recibirá el objeto datos con el atributo idProducto. Nos conectaremos al host, a la base de datos y recuperaremos de la mismas los datos del producto que tenga la id que hemos recibido. Meteremos en un array estos datos y lo enviaremos como objeto JSON. Lo descodificaremos en el archivo funciones.js que veíamos anteriormente y pintaremos los datos.





estilos.css


#html {
background-color: #f3e4cf;
}
.nombre_producto {
border: 1px solid #000;
padding: 10px;
background-color: #d29c4e;
color: #fff;
cursor: pointer;
}
.datos_producto {
border: 1px solid #000;
padding: 10px;
background-color: #9a7a4d;
color: #fff;
}




Este es un ejemplo sencillo con muchas cosas que mejorar, como por ejemplo que cuando volvamos a hacer click sobre el nombre del producto, se añada una clase que oculte los datos del producto y si se vuelve a pinchar los vuelva a mostrar.
Otro aspecto sería crear un archivo de conexión único y hacer un include del mismo en cada una de las páginas que lo fuésemos a utilizar para evitar repetir código.

Puedes descargarte la base de datos que yo he utilizado haciendo click aquí.

4 comentarios:

  1. Estuve navegando por internet buscando exactamente un ejemplo así para una galeria de productos!! Me reeee ayudo pq todos los ejemplos hablan de contactos y tablas!

    ResponderEliminar
  2. muyyyyyyyyyyy bien explicado la verde muy bueno gracias

    ResponderEliminar
  3. Gracias por el tutorial, me sirvio de mucho

    ResponderEliminar