Cargando contenido dinámico con la función ajax de jQuery
20 oct
Cuando presentamos la página web, os comentamos la facilidad de cargar contenidos dinámicos vía AJAX con jQuery, y ya va siendo hora de enseñaros como hacerlo.
Además de explicaros como cargar contenido dinámico, vamos a enseñaros también la función slideDown para mostrar el contenido cargado y darle un aspecto bastante elegante.
Bueno para empezar necesitamos crear un elemento donde vamos a mostrar los datos obtenidos vía AJAX. En el ejemplo tenemos index.html que es quien recibe los datos, de los archivos contenido.html y contenido_anim.html
En vez de cargar el contenido dinámico una vez hayamos cargado la página, vamos a cargarlos con un botón, de esta forma:
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#boton_cargar').click(function() {
$.ajax({
url: 'contenido.html',
success: function(data) {
$('#div_dinamico').html(data);
}
});
});
$('#boton_cargar_anim').click(function() {
$.ajax({
url: 'contenido_anim.html',
success: function(data) {
$('#div_dinamico_anim').html(data);
$('#div_dinamico_anim div').slideDown(1000);
}
});
});
});
</script>
Vamos a explicar un poco la función ajax que se encarga de leer los datos externos:
$.ajax({
url: 'contenido.html',
success: function(data) {
$('#div_dinamico').html(data);
}
});
Conectamos con contenido.html, que es el archivo externo que vamos a leer, para mostrar su contenido en nuestro sitio web.
Si todo ha funcionado correctamente, el archivo contenido.html existe y carga correctamente, recibiremos una variable data con el contenido del archivo externo.
Una vez que recibimos los datos, con la función html() que sirve para cambiar el contenido html de un elemento, cambiamos el contenido html del elemento div_dinamico que es el que hemos creado para mostrar los datos. Y aquí os mostramos el botón que utilizamos para cargar los datos y el elemento que muestra los datos:
<input name="boton_cargar" id="boton_cargar" type="button" value="Cargar contenido" /> <div name="div_dinamico" id="div_dinamico" class="div_dinamico"></div>
En el otro ejemplo, hacemos exactamente lo mismo, pero mostramos el contenido en un div invisible con display:none y despues lo cambiamos a display:block con la función slideDown para darle un efecto elegante.
$.ajax({
url: 'contenido_anim.html',
success: function(data) {
$('#div_dinamico_anim').html(data);
$('#div_dinamico_anim div').slideDown(1000);
}
});
Muy buen ejemplo!, es lo ke necesito, gracias por el aporte!
Hola! entiendo el funcionamiento, pero, ¿porqué cargar los contenidos dinámicamente? ¿cuáles son las ventajas y a qué podemos aplicarlo? ¿es parecido a lo que ocurre con flash? gracias!
Cargar contenidos dinamicos permiten que la pagina se cargue una sola vez y sobre ella los contenidos pequeños de manera dinamica. Evitando asi sobrecarga y lentitud por cada contenido si es que todo el diseño es el mismo y lo unico que queremos cambiar es una parte de la pagina.
Ademas del botón básico se pueden usar imágenes o links normales para cargar el contenido, por que lo que necesito es diseñar una imagen en formato jpg y usarla como un botón y me queda la duda de si así también funciona
Hola Juan,
Si, claro que es posible.
Solo tendrías que ponerle un “id” o “clase” a la imagen y seguir el mismo ejemplo de arriba pero con el botón.
Saludos
Excelente, Gracias por el aporte, lo andaba buscando.
Saludos!
Hola que tal he seuido tus pasos y no logro hacer que me salga u.u que puede estar mal? clickeo el boton y nada…
Funciona!!
pero como se puede hacer para que en vez de
“contenido.html” sea un link php , asi
“pagina.php?id=”
y reconocer el id del enlace.
Gracias!
Excelente!, pero como puedo llamar a la función desde el action, uasndo un input type:image
Buen aporte, es justo lo que estaba buscando para mi sitio web; sin embargo al implementarlo he notado lentitud al cliquear en los botones. También al cargar cada una de las páginas hay q esperar cierto tiempo. la carga no es al instante y hay momentos en que asi hagamos clic en los botones, estos no muestran ningun comportamiento.