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:
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.
Esta entrada ha sido actualizada el 06/08/2018.
Autor
¿Buscas trabajo de programador?
47 respuestas a “Cargar contenido sin recargar la página”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Hola tendras algo parecido para ingresar (input) datos desde la misma pagina sin que se recargue?.
Gracias.
Hola,
Creo que lo que solicitas se puede conseguir con Ajax.
En la categoría Ajax de este blog hay varios ejemplos útiles que permite acceder al servidor para recuperar información y mandarla de regreso al dom sin recargar la página.
Saludos
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»);
Ofreces el servicio de crear algo así en mi web?
Hola,
Si, puedes enviar un ticket a nuestro centro de soporte técnico con todos los detalles para que estudiemos tu caso. El centro de soporte técnico lo puedes encontrar en:
https://www.jamodules.com/prestashop-addons/es/soporte
Saludos
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
Hola,
En este caso, quizá es mejor poner la galería en otra página para aligerar la página principal.
Saludos
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?
Muy buen contenido, sencillo practico y funcional. Me ha servido de mucha ayuda. Saludos y sigan asi, ayudando a toda la comunidad. Saludos,
Muchas gracias por el ejemplo.
Me ayudo mucho para entender como hacer los llamados.
Saludos desde México.
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?
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
Hola Cordial Saludo, quisiera hacer lo mismo para el front end de una pagina de wordpress. Me podría ilustrar como hacerlo.
Hola,
Nos gustaría poder enviarte una solución rápida pero lamentamos decir que no la hay. Puede enviar un mensaje al centro de soporte técnico para que estudiemos tu solictud desde:
https://www.jose-aguilar.com/modulos-prestashop/es/soporte
Saludos
Hola me interesa mucho saber como mantengo eso q agregu’e con load una vez que actualizo el sitio completo??
Gracias
Hola,
Quizá de la misma forma pero agregando el sitio completo desde el Ajax.
Saludos
buen info amigo
quien me puede ayudar y enviar la pagina web de ejemplo
o alguno similar para poder revisarlo y ensayar
saludos!
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.
Hola, acabo de descargar el ejemplo y veo que si que funciona. Debes descomprimirlo y despues visualizarlo en el navegador teniendo la carpeta descomprimida
me puedes pasar es documento lo necesito
Hola,
Ahora puede descargar el ejemplo en funcionamiento:
http://www.jose-aguilar.com/scripts/jquery/page-ajax/page-ajax.zip
Saludos
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
Hola,
Si, en joomla seguro que lo puedes aplicar pero tendrás que investigar como hacer el load de cada página.
Saludos
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
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.
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
–>
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.
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.
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
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.
HOla,
Bueno, igual que todo lo estás recargando con jQuery, el formularia también lo puedes enviar utilizando la técnica Ajax.
En la sección de Ajax de este blog podrás ver muchos ejemplos de esta técnica.
Saludos
funciona igual cargar el cntenido(formulario) de una pagina, con jquery y ajax?
si he entendido bien la pregunta diría que si
Hola como seria para animar el cambio del documento como un fadeIn y un fadeOut.
gracias tu blog esta lleno de cosas interesantes.
Hola,
No lo he probado pero podrías probar con:
$(«#central»).load(‘inc/gallery.php’).fadeIn();
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?
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?
xD mirando tu ejemplo es lo mismo que tenes en productos
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.
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
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.
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 🙂
Hola buenas tardes,
Para agregar un gif animado puedes guiarte con la siguiente entrada:
http://www.jose-aguilar.com/blog/efecto-cargando-con-jquery-ajax/
saludos,
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
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!
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