En unas pocas líneas vamos a ver lo sencillo que es repaginar utilizando jQuery y AJAX. El ejemplo que vamos a montar es el típico en el cual un servicio de datos nos devuelve mensajes, mientras que nosotros, en la parte cliente realizaremos repaginaciones mediante peticiones AJAX a ese servicio.
En primer lugar contaremos con un servicio de datos que daremos por construido, al que llamaremos datos.php. Este servicio puede recibir por parámetro el valor de la página de datos a mostrar. Siguiendo la siguiente sintaxis:
datos.php?pagina=1 //Nos devolverá la primera página datos.php?pagina=5 //Nos devolverá la quinta página
En posteriores artículos entraremos en detalle de como construir esta página con PHP de forma sencilla. Pero de momento nos vamos a centrar en el desarrollo de la parte cliente con jQuery para realizar peticiones AJAX.
Lo primero será la estructura de la página. Esta tendrá una capa donde volcaremos los mensajes, y dos botones que nos permitirán el ir hacía delante y hacía detrás.
|
Vemos que no tiene nada de código Javascript, y es que este le inyectaremos de forma no intrusiva mediante jQuery.
La inicialización de jQuery, tan sencilla como una línea:
De forma general vamos a definir una variable llamada página, la cual representa la página de mensajes a visualizar:
var pagina=1;
La inicializamos a un valor de 1 para que esta sea la primera página a visualizar.
Lo siguiente será codificar las acciones de click sobre los botones. El método que nos permite capturar un click sobre un elemento es el método .click() de jQuery. La codificación de los botones será muy sencilla. Los pasos que seguirán serán.
- Decrementar el valor de una variable general llamado página
- Llamar a una función cargardatos(); la cual implementará las peticiones AJAX
El código quedará de la siguiente manera:
$("#anterior").click(function() {
pagina--;
cargardatos();
});
$("#siguiente").click(function() {
pagina++;
cargardatos();
});
Como nuestras peticiones AJAX no van a ser muy complejas la función cargardatos se apoyará en el método .get() el cual hace peticiones AJAX de tipo GET. Aunque la función .get() tiene varios parámetros (échale un vistazo a los parámetros de la función .get()) nosotros vamos a utilizar 2.
El primer parámetro indicará el origen de datos que nos devuelve el contenido. Es decir, datos.php. Como la URL a montar varía dependiendo del valor de la página en la que estemos, tenemos que apoyarnos en el valor de la variable global página que estabamos utilizando
"datos.php?pagina="+pagina;
El segundo parámetro de la función .get() es un función que recibe un parámetro data con los datos de la respuesta y cuyo contenido es las acciones que vamos a realizar sobre ellos. En nuestro caso el contenido lo vamos a añadir a la capa «mensajes». Apoyándonos en el método .html(), el cual incluirá ese contenido sobre la capa.
function(data){
if (data != "") {
$("#mensajes").html(data);
}
Así, el código completo de la función cargardatos() quedará de la siguiente forma:
function cargardatos(){
$.get("datos.php?pagina="+pagina,
function(data){
if (data != "") {
$("#mensajes").html(data);
}
}
);
}
Unas pocas líneas y algo que parece tan complejo como repaginar con jQuery y AJAX… resuelto.
