Cargar contenido sin recargar la página

Para mejorar la usabilidad de una página Web en muchas ocasiones puede ser una gran ventaja utilizar jQuery para cargar contenido sin recargar la página.

La información que aparece en la cabecera, pie de página y columnas en la mayoría de casos siempre suele ser la misma y quizá puede resultar interesante mantenerlas ahí de forma estática mientras el usuario navega y cargar el contenido en una única parte de la página que podemos denominar como dinámica.

En el ejemplo que queremos ilustrar en este tutorial vamos a tener una cabecera fija, un menú fijo y un pie de página fijo. La parte central del contenido será la que cambiará según el usuario va pulsando en los elementos del menú.

Conseguir este efecto se puede hacer de diversas formas. En este tutorial vamos a ver como hacerlo con la función load() que tiene disponible jQuery.

En primer lugar tenemos que agregar en la cabecera o dentro de la etiqueta <head> la librería jQuery y el script que captura el evento:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#div-btn1').on('click', function() {
        $("#central").load('inc/presentation.php');
        return false;
    });
    ...
});
</script>

Si nos fijamos, a parte de incluir la librería jQuery, estamos agregando un código que captura el evento de hacer click en el botón o enlace con identificador «div-btn1». Al hacer click en este elemento,  tan solo rellenamos el contenido con identificador «central» con el contenido que tenga el archivo pasado como parámetro en la función load().

Esta función nos permite cargar los datos del servidor y colocar el HTML devuelto en el elemento coincidente consiguiendo el objetivo de este tutorial: cargar contenido sin recargar la página.

En el siguiente enlace puedes ver una documentación completa de la función load(). Ver más información.

El elemento que hace de enlace o ejecuta el evento es tan simple como lo siguiente:

<a class="nav-link" id="div-btn1" href="#">Presentation</a>

Lo puedes depositar en cualquier parte de tu documento HTML. En el caso del ejemplo hemos creado un menú utilizando Bootstrap.

El archivo prestentation.php que se está haciendo referencia en este tutorial tan solo tiene un poco de código HTML pero podría tener cualquier información que se puede sacar de una base de datos, de una archivo o de donde te puedas imaginar.

Ver demo Descargar

Esta entrada ha sido actualizada el 06/08/2018.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(31 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

45 respuestas a “Cargar contenido sin recargar la página”

  1. Daniela Flores dice:

    use el código para actualizar un div, pero las funciones js de lo botones dentro del div dejan de funcionar hasta que refresque nuevamente la pagina, alguien me puede ayudar.
    $(‘#divDetallePedido’).load(» #divDetallePedido»);

  2. Cristian Sanfelippo dice:

    Ofreces el servicio de crear algo así en mi web?

  3. Hola, esto me podría ayudar a ligerar el peso de carga (por asi decirlo), en mi pagina web? es decir, tengo que poner una galeria de imagenes, pero para que esto no se cargue en la pagina principal requiero hacer que se carguen solo cuando se de un click en un boton

  4. Jovany Hernández dice:

    Hola amigo, y si en dado caso, quiero mantener esa sección abierta al recargar la página… ¿Cómo le hago?
    porque actualmente si haces reload a la pagina se regresa al Home.
    ¿Como se soluciona eso?

  5. Muy buen contenido, sencillo practico y funcional. Me ha servido de mucha ayuda. Saludos y sigan asi, ayudando a toda la comunidad. Saludos,

  6. Rocko023 dice:

    Muchas gracias por el ejemplo.
    Me ayudo mucho para entender como hacer los llamados.
    Saludos desde México.

  7. nixon dice:

    Hola,
    Una pregunta, resulta que tengo varios scripts que utiliza la «pagina 1» que quiero cargar en la «pagina 2», ¿al recargar una parte de esa «pagina 1» en la «pagina 2» puedo utilizar los scripts de la «pagina 2» en la «pagina 1» o cada pagina sigue siendo aparte?

    • Jose Aguilar dice:

      Hola,

      La respuesta a tu pregunta dependerá de como estés cargando las páginas. Si lo haces de forma completa, es posible que no haga falta en la página 2 ya que ya los tendrá.

      Saludos

  8. Antonio J. Gomez dice:

    Hola Cordial Saludo, quisiera hacer lo mismo para el front end de una pagina de wordpress. Me podría ilustrar como hacerlo.

  9. yari dice:

    Hola me interesa mucho saber como mantengo eso q agregu’e con load una vez que actualizo el sitio completo??
    Gracias

  10. dante dice:

    buen info amigo

  11. pablo antinao dice:

    quien me puede ayudar y enviar la pagina web de ejemplo
    o alguno similar para poder revisarlo y ensayar

    saludos!

  12. Mari dice:

    Cuando pruebo la página de ejemplo en en link que colocas funciona normal. ¿Pero por qué cuando descargo el ejemplo en zip y abro el index con el navegador no funciona? ¿debo hacer algo mas? No sé mucho de ajax pero me interesa que el contenido se cargue de esta manera, por ejemplo en un div central. Gracias.

    • Jose Aguilar dice:

      Hola, acabo de descargar el ejemplo y veo que si que funciona. Debes descomprimirlo y despues visualizarlo en el navegador teniendo la carpeta descomprimida

  13. Carlos dice:

    me puedes pasar es documento lo necesito

  14. Jean Armando dice:

    Hola Jose

    Buscando algunas cosas llegue a tu web que realmente esta muy buena, me ayudo mucho a salir de algunas dudas.
    En este caso veo esta publicacion y tengo dudas para aplicarlo en Joomla 3.3.x
    Resulta que la seccion o posicion donde aparecen las publicaciones tiene el id=»mainbody» quisiera saber como puedo aplicarlo para eso.

    Más detalle sería que intento que la web no recargue completamente al cambiar de pagina (2,3,4,5). Podrias ayudarme con eso, que realmente recien estoy adentrandome en lenguajes de diseño.

    Saludos desde Chile

    • Jose Aguilar dice:

      Hola,

      Si, en joomla seguro que lo puedes aplicar pero tendrás que investigar como hacer el load de cada página.

      Saludos

  15. juan pablo barreto gonzalez dice:

    Estoy creando una pagina web, y mi deseo es que se vea como el ejemplo completo que colocaste arriba, pero no tengo el suficiente conocimiento, podrías compartir ese código para guiarme. gracias

  16. Héctor dice:

    Buenas!
    Está bien pero al llamar a la función load() me carga toda la pagina de nuevo y me lleva a la parte de arriba, con el contenido correspondiente en el div que toca, eso sí.
    Es eso normal? Porque yo quisiera que todo se quedase donde está y solo se cargara la parte que le pido…
    Grácias.

  17. Erick dice:

    Se puede utilizar lo mismo para este caso solo quiero cargar dentro de content y no toda la pagina:
    <!–


    Administración de la Tienda Multiservicios Abacoperu



    Contenido

    Administración de la Tienda

    –>

  18. Cesar dice:

    Perdona mi ignorancia pero quisiera saber si ese jquery me sirve para ponerlo en mi pagina web, pero esque yo uso dreamweaver 8 es para una tarea, y aurita solo sé usarlo en diseño y no en codigo 🙁 , me podrian ayudar? como ponerlo y asi? , urge porfa, lo que quiero es poner un texto pero es muy largo y quiero ponerlo por partes pero no quiero que se recargue toda la pagina si no solo el cuadro donde esta el texto para que le de click y se cambie el texto..
    Gracias.

    • Jose Aguilar dice:

      En modo diseño no se puede hacer. Tienes que trabajarlo en modo código y copiar lo que se indica en el artículo. Te faltará la librería jQuery que te la tendrás que descargar.

  19. rnz dice:

    amigo cuando yo quiero cargar un elemento o control que tiene un evento, pues al cargarlo con load el evento del control no funciona. la solucion seria cargar toda la pagina en donde esta el control para que tambien cargue su evento q esta en javascript.. pero si en esa pagina hay varios controles y yo quiero cargar uno de ellos como hago para que tambien me cargue con su evento

  20. Rafa dice:

    Hola,

    Si tenemos una pagina que contiene un formulario de contacto, ¿como hacemos para recargar la pagina del formulario una vez que este se envie?

    En mi caso en concreto, lo que hace dicho formulario es guardar unos datos en una BBDD MySQL.

    Gracias y felicidades por el blog.

  21. Jose Luis dice:

    Hola como seria para animar el cambio del documento como un fadeIn y un fadeOut.
    gracias tu blog esta lleno de cosas interesantes.

  22. zuri dice:

    hola!
    eh intentado hacer esto en una pagina cargada en un div:
    $(«#midiv»).load(‘mi pagina’);
    Al momento de entrar al index de la pagina, ésta carga bien, pero a los segundos se vuelve a cargar quedandose totalmente en blanco…
    ya me di cuenta que es el load(), porque cuando se lo quito todo funciona con normalidad, porque puede ocurrir esto?

  23. Jose dice:

    Gracias lo estaba buscando esta muy útil el código.
    Ahora Como podemos animar ese cambio de contenido.
    Para que no se vea tan reapido?

  24. Bekor dice:

    xD mirando tu ejemplo es lo mismo que tenes en productos

  25. Bekor dice:

    Hola,

    Muchas gracias por ejemplo me ha aclaro un par de cosas, pero tengo un problema, deseo hacer lo mismo en una aplicación que estoy desarrollando, pero esta ademas de tener ese menú del lado izquierdo, tengo dentro del contenido unas pestañas en las cuales debo mostrar un formulario o cualquier cosa que desee.

    la aplicación me debe cargar un perfil y de acuerdo al perfil mostrarme los módulos a los que tiene acceso y las funciones que puede hacer dentro de cada modulo, esa parte es la que me tiene volteando no se como enlazar los módulos y las funciones por medio del jquery.

    Te agradecería si de pronto conoces alguna forma como hacerlo,

    Muchas gracias.

  26. scabelhrf dice:

    una consulta como actualizaria una funcion sin que la pagina se recargue esto con javascript por ejemplo un campo sirve para el calculo de la funcion y al modificarlo quiero que automaticamente se recargue la funcion y me saque el resultado actualizado

    Saludos

    • Jose Aguilar dice:

      HOla,

      Diría que en el campo o imput puedes poner un evento -> onChange=»javascript:nombreFuncion()». Algo así sería.

      Yo buscaría como se utiliza el evento onChange

      Otra opción también sería utilizar la función blur de jQuery.

  27. tabam dice:

    Es lo que estaba buscando para crear la pagina de una inmobiliaria donde se cargan dinamicamente las localidades de los inmuebles que estan en venta y se encuentra en la BD.

    Pero como haria para agregarle un .gif animado para indicar que se esta cargando la pagina exterior en php y que esta accediendo a la base de datos???????

    gracias 🙂

  28. Anderson dice:

    Excelente Post, me gusta tu blog.

    Anexo codigo de error del ejemplo en linea:

    Warning: sort() expects parameter 1 to be array, null given in /home/josea902/public_html/scripts/jquery/page-ajax/inc/especialidades.php on line 24

  29. Rikochett dice:

    Estimado,

    Excelente el método para no recargar la página y da mayor seguridad, también, en el caso de usar data leída desde la base de datos MySQL. Funciona de mil maravillas. El único gran PERO es que me salen esos horribles símbolos encerrados en un rombo con el signo de interrogación, ya que por causa del javascript, no reconoce ni los acentos ni las eñes.

    Te agradeceré mucho si me orientas al respecto. Desde ya, muchísimas gracias.

    Saludos y excelente tu blog!

    • Jose Aguilar dice:

      Prueba de utilizar en el archivo PHP en lo que vas a retornar con el echo añadir la función UTF8_encode:

      UTF8_encode($data);

      Si no funciona, posiblemente tengas que cambiar la codificación del archivo. Pasarlo a UTF8

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre