Adsence

martes, 24 de septiembre de 2013

Ajax con Jquery

By Jorge , , , , Leave a Comment

Hola, buenas tardes. El dia de hoy les traigo una guia para saber como manejar ajax con JQuery.

 Pero antes de eso, muchos se preguntara, que es ajax? para que me sirve?.

 Pues bueno, vamos a ver para que nos sirve:

 Digamos que estas trabajando en un proyecto web cualquiera, y estas ante la siguiente situacion: debes mostrar una informacion nueva en la pagina basandote en una accion que hizo el usuario, pero sin tener que recargar la pagina. Un ejemplo de esto es que si el usuario da clic en algun elemento de la pagina web (puede ser un link, un boton , una imagen, etc) debes hacer una consulta a una base de datos y con esa consulta mostrar unos resultados.


Para entenderlo vamos a realizar el siguiente ejercicio: En una pagina web tienes una lista de ciudades, y necesitas que el usuario al dar clic en alguna ciudad, muestre las personas que viven en dicha ciudad.

 Para eso, tienes la siguiente estructura sql:

 




CREATE TABLE IF NOT EXISTS `ciudad` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`Nombre` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

INSERT INTO `ciudad` (`id`, `Nombre`) VALUES
(1, 'Amazonas'),
(2, 'Cucuta'),
(3, 'Bucaramanga'),
(4, 'Bogota');

CREATE TABLE IF NOT EXISTS `persona` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`id_ciudad` int(11) NOT NULL,
`nombre` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

INSERT INTO `persona` (`id`, `id_ciudad`, `nombre`) VALUES
(1, 1, 'Juan'),
(2, 1, 'Pedor'),
(3, 2, 'Eliana'),
(4, 2, 'Ericka'),
(5, 3, 'Ordoñez'),
(6, 4, 'Esteban'),
(7, 4, 'Peter'),
(8, 4, 'Oscar');
La pagina web que usaras sera la siguiente:

 


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo Ajax</title>
<!-- Le decimos donde se encuentra el jquery -->
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function()
{
//Esta funcion se activara cuando se de clic en algun enlace cuyo id sea igual a ciudad
$("[id=ciudad]").click(function(e){
//Evito que el link funcione, es decir que no me llebe a algun lado
e.preventDefault();
//Determino el id_ciudad del link que dio clic
var id_ciudad=$(this).attr("id_ciudad");

$.ajax({
type:"POST",
url:"listar.php",//pagina a cual enviar
data: {ciudad:id_ciudad},//datos a enviar
success: function(data)
{
$("#resultado").html(data);//mostrar el resultado

}
});
});

});
</script>
</head>

<body>
<p align="center">Ejemplo Ajax con JQuery.</p>
<p>En este ejemplo, el usuario al hacer clic en alguna de las ciudades le mostrara los nombres de personas que vivan en esa ciudad</p>
<table width="100%" border="1">
<tr>
<td width="20%">Ciudad</td>
<td>Personas</td>
</tr>
<tr>
<td width="20%"><a href="#" id="ciudad" id_ciudad="1">Amazonas</a></td>
<td rowspan="4" id="resultado">&nbsp;</td>
</tr>
<tr>
<td width="20%"><a href="#" id="ciudad" id_ciudad="2">Cucuta</a></td>
</tr>
<tr>
<td width="20%"><a href="#" id="ciudad" id_ciudad="3">Bucaramanga</a></td>
</tr>
<tr>
<td width="20%"><a href="#" id="ciudad" id_ciudad="4">Bogota</a></td>
</tr>
</table>
</body>
</html>




La parte mas importante es la siguiete:



 

 

 


$.ajax({
type:"POST",
url:"listar.php",//pagina a cual enviar
data: {ciudad:id_ciudad},//datos a enviar
success: function(data)
{
$("#resultado").html(data);//mostrar el resultado

}
});



Esa, es la que nos permite realizar la llamada a otra pagina, sin la necesidad de recargar toda.


    

  • type: Es la manera como sera mandada la informacion a la otra pagina, puede ser GET o POST.
    • 

  • url: Es la url a la cual enviaremos la informacion.
    • 

  • data{nombre:valor}: Es donde colocaremos toda aquella informacion que deseemos enviar,no es unicamente una sola variable, puedes enviar varias, separas por coma. data{id_ciudad:3, pais:Colombia,cedula:103342}+
    • 

  • success: Esta funcion se ejecuta cuando la pagina (listar.php) termine de hacer todo lo que debe, y todo lo que esa pagina nos devuelva, se almacena en la variable data, luego podemos hacer lo que deseemos con esa informacion, en este caso se "pinto" en la columna que cuyo id es "resultado".
    • 


El resto del codigo lo pueden conseguir aqui







































0
comentarios
                              :
                            













Publicar un comentario