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);
	}
});

10 Respuestas a “Cargando contenido dinámico con la función ajax de jQuery”

  1. Enrique 7 enero, 2011 at 19:20 #

    Muy buen ejemplo!, es lo ke necesito, gracias por el aporte!

  2. Biyongas 7 febrero, 2011 at 17:05 #

    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!

  3. Jorge 29 junio, 2011 at 17:26 #

    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.

  4. Juan Sebastian Cruz 10 enero, 2012 at 3:30 #

    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

    • admin 11 enero, 2012 at 22:18 #

      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

  5. John Lopez 10 enero, 2012 at 18:51 #

    Excelente, Gracias por el aporte, lo andaba buscando.

    Saludos!

  6. Diego 18 febrero, 2012 at 0:34 #

    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…

  7. farnco 19 febrero, 2012 at 5:24 #

    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!

  8. ruso 7 marzo, 2012 at 22:47 #

    Excelente!, pero como puedo llamar a la función desde el action, uasndo un input type:image

  9. Jorge 16 marzo, 2013 at 19:12 #

    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.

Agregar un nuevo comentario a Biyongas