Abrir contenido sin recargar la página

En este artículo vamos a explicar como mostrar o abrir contenido dinámicamente en un contenedor <div> sin tener que recargar la página entera utilizando la librería jQuery, Ajax y PHP. Abrir contenido sin recargar la página es posible si sigues este tutorial.

Esta técnica se puede utilizar para menús, links o todo tipo de enlaces que lleven a otra página o que ejecuten alguna acción en el servidor y que te gustaría hacerlo sin recargar la página.

Al añadir estos efectos en tu página Web puedes ganar importantes puntos de cara a mejorar la navegación y la usabilidad. Este simple gesto puede hacer la vida más fácil al usuario ya que permite disponer de la información solicitada dinámicamente sin tener que recargar la página y esperar a que sea cargada por completo para contemplar la solicitud.

En el ejemplo que vamos a ilustrar vamos a tener 2 botones o enlaces que al pulsar en ellos se ejecutará una llamada Ajax para cargar un contenido en un contenedor preparado para ello.

En primer lugar deberemos 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() {
    $('#btn1').click(function(){
        $.ajax({
            type: "POST",
            url: "hola.php",
            success: function(response) {
                $('#div-results').html(response);
            }
        });
    });
 
    $('#btn2').click(function(){
        $.ajax({
            type: "POST",
            url: "adios.php",
            success: function(response) {
                $('#div-results').html(response);
            }
        });
    });
});
</script>

Si te fijas bien en el código que captura los eventos, estamos esperando a que los botones #btn1 y #btn2 sean clickeados para ejecutar una llamada Ajax que cargará el contenido del archivo indicado en el contenedor #div-results.

En el cuerpo de la página o dentro de la etiqueta <body> tenemos los 2 enlaces y el contenedor vacío:

<a class="btn btn-success" id="btn1">Ver el archivo que contiene hola</a> 
<a class="btn btn-danger" id="btn2">Ver el archivo que contiene adios</a>
<div id="div-results"></div>

El archivo “hola.php” tan solo contiene:

<?php
echo '<p>ESTE ES EL ARCHIVO PHP QUE CONTIENE EL HOLA</p>';
?>

Y el archivo “adios.php” tan solo contiene:

<?php
echo '<p>ESTE ES EL ARCHIVO PHP QUE CONTIENE EL ADIOS</p>';
?>

En estos archivos PHP puedes hacer todo lo que se te ocurra. Puedes consultar una información específica en una base de datos para mostrarla o puedes abrir un archivo para obtener un registro, etc.

Como puedes observar, abrir contenido sin recargar la página es bastante simple y lo mejor de todo es que ayuda a mejorar la usabilidad y la navegación de tu sitio Web.

Ver ejemplo en funcionamiento

Ver ejemplo más completo

Esta entrada ha sido actualizada el 25/07/2018.

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (23 votos, promedio: 4,74 de 5)
Cargando…
Comparte en las redes sociales

71 respuestas a “Abrir contenido sin recargar la página”

  1. Maxi Duarte dice:

    Hola Jose,
    Yo vengo utilizando un código muy similar al que expones acá, y me encuentro con dos problemas:

    1.- Google no ve ningún vinculo por lo cual no indexa nada.
    2.- Al realizar actualización de contenido sin refrezcar la pantalla, no queda en el historial de navegación, por lo que termina comportándose como un flash, donde al hacer clic en history.back, se va la pantalla salteando todos los cambios dinámicos que podríamos haber hecho.

    Encontraste alguna solución para esto?

    • Félix dice:

      Tengo el mismo problema que Maxi Duarte. Recurrí a AJAX para poder optimizar la carga de contenido y me encontré con que al usar el método GET, la url no cambia para mantener la información (lo que me parece obvio, considerando que no queremos recargar la página completa). Por otro lado, páginas como facebook logran cargar dinámicamente contenido parcial guardando la información en la URL, lo que me hace seguir buscando cómo hacerlo, sin obtener resultados.
      Atento a tus comentarios. Saludos!

  2. Lashawn Berkery dice:

    I like this post, enjoyed this one regards for posting .

  3. Jorge Galán dice:

    Buen post, es lo que estoy buscando, pero no me funciona, te agradecería el código del ejemplo

    • Jose Aguilar dice:

      Me gustaría saber cual es tu problema. El código del ejemplo está implícito en el artículo.

      Solo falta que añadas un archivo php con un echo para ver el efecto y llamarlo mediante ajax de la misma forma que llamo al “hola.php”

  4. José Antonio Huerta Escribano dice:

    Me causa conflicto cuando, en una interfaz html que tiene jquery, intento mandar a llamar otra que también tiene jquery… podrías ayudarme? De antemano, te lo agradezco

  5. William dice:

    Buenas amigo, que posibilidades existe de que puedas publicar los archivos descargables?
    Gracias de antemano

  6. augusto dice:

    “Se le podría pasar datos que serían recibidos mediante el método POST pero este caso no es necesario”…justo eso es lo que estoy buscando, en TODO lado hay el codigo que publicas, lo que no hay es como pasar variables post o get…

  7. Rikochett dice:

    Está genial el sistema, funciona perfecto la carga de información desde la base de datos MySQL. Claro, la limitación es qu no puedes leer información como un menú dinámico … por ejemplo:

    echo ”.$row[‘Menu’].”;

    Si alguien sabe cómo hacerlo sin romper el esquema del menú Noticias, que pase el dato.

    Salu2

  8. Rikochett dice:

    Está genial el sistema, funciona perfecto la carga de información desde la base de datos MySQL. Claro, la limitación es qu no puedes leer información como un menú dinámico … por ejemplo:

    echo \'<a href=\"pagina.php?Menu=\’.$row[\’Menu\’].\’\">\’.$row[\’Menu\’].\'</a>\’;

    Si alguien sabe cómo hacerlo sin romper el esquema del menú <li><a href=\"#\" id=\"div-btn1\" style=\"cursor:pointer;\">Noticias</a></li>, que pase el dato.

    Salu2

  9. tabam dice:

    que le tengo que agregar al codigo para que me permita subir archivos al servidor por medio de:

    No se nada de jquery y ajax pero le agradecería mucho que me dijan como hacerlo.

    gracias

    • tabam dice:

      Es a traves de una etiqueta input con el atributo type=”file”.

    • Es casi imposible subir archivos mediante Ajax, la MAYORÍA de los navegadores mas actuales permiten subirlo mediante el DATAFORM. Lo mejor es hacerlo a la antigua, con IFRAME simulando Ajax, el cual para mi, al momento de subir archivo es el único método funcional para todos los navegadores.

  10. jorge dice:

    hola disculpe como seria el codigo del php, soy novato en esto. gracias

  11. Javier dice:

    Lo que veo como falla es que haciendo boton derecho – – y seleccionando ver codigo fuente, podemos ver tanto el codigo javascript como el de ajax por ende mandar datos en el post pierde privacidad ya que cualquiera puede enterarse que parametros recibe el php y vulnerarlo. ¿Hay algún codigo que sea más seguro?

  12. Innovatech dice:

    Se podria implementar algo similar en joomla

  13. J Moises dice:

    Que tal Jose…!!! Antes que nada agradecerte y felicitarte por tu blog, la verdad me han ayudado bastante.

    Y bueno haber si me puedes ayudar con un detalle que me tope, lo que sucede es que al checar el ejemplo mas completo de esta aplicacio sucede que al entrar (por ejemplo) a “noticias” al actualizar la pagina me regresa de nuevo al inicio y me gustaria que al actualizar la pagina se mantenga en “noticias”. De antemano gracias y espero me puedas ayudar..!!!

  14. martamill3 dice:

    quizás el problema está en el java script de Jquery.

    A mi me ha funcionado poniendo estos scripts

  15. francisco dice:

    Ver ejemplo más completo.- Jose ruego si puedes me envies el codigo de este articulo, ya que yo no se programar pero llevo mucho tiempo buscando algo como lo que tu muestras en tu web en “Ver ejemplo más completo” falfonsin@gmail.comdandote las gracias francisco alfonsin

  16. Dan dice:

    Muy buenas,

    Estoy empezando con javascript y jquery y he intentado ejecutar en mi localhost el ejemplo que describes en esta página y no lo he conseguido, el código es el siguiente (igual que el que describes claro pero te incluyo las rutas):

    localhost/prueba/index.php

    $(document).ready(function() {
    $('#div-btn1').click(function(){
    $.ajax({
    type: "POST",
    url: "hola.php",
    success: function(a) {
    $('#div-results').html(a);
    }
    });
    });
    });

    Ver el archivo que contiene hola

    localhost/prueba/hola.php

    <?php echo "Hola mundo";?>

    Me estoy volviendo loco ya que un código tan aparentemente fácil no consigo hacerlo funcionar a modo de aprendizaje, puedo ver el índice pero cuando hago click en el texto, no ocurre nada. Por si pudiera ayudar, estoy ejecutando el código en XAMPP en mi propio ordenador.

    Saludos.

  17. Alberto dice:

    Estupendo tuto ! solo te falta cerrar la etiqueta del bloque javascript del principio 😉

    Saludos!

  18. Erick dice:

    se puede hacer lo mismo en un template o plantilla donde los div estan como esto :

    Contenido

    Administración

    solo quiero que cargue en la region editable o donde se muestra el contenido(Contenido
    ). estare agradecido de tu pronta respuesta. gracias

  19. Erick dice:

    en mi comentario anterior no se por que no salio esto
    inicia etiqueta

    body


    Contenido

    Administración de la Tienda

    despues de esto termina la etiqueta body

  20. lHumanizado dice:

    Muy bueno el tutorial lo hice y me funciono pero si refresco la pagina me llevara de nuevo a la pagina principal y no en el sitio que estoy en ese momento, como haria para que si seleccione hola.php y estoy viendo los datos de la hola.php cuando rercargue no me lleve de nuevo al index si no al mismo contenido que estoy viendo en ese momento (hola.php)

  21. Juan josé dice:

    Hola, Encantado con toda tu web, me ayuda mucho. Bueno al lío. Te comento, tengo un index.php en el que se muestran varias imágenes, que al hacer clic abren la pagina de cada una de ellas, <a href="propia.php?id=, en la que se muestra un ranking de votos,entre otras cosas y este es dado desde una consulta a mysql con WHERE id= $_GET[‘id’]. Bien como puedo hacer para que mediante función ajax, se actualice al cambio de votos en mysql.
    No se si este es el lugar mas apropiado para realizar esta consulta pero la verdad estoy a punto del colapso mental.

  22. Jose Carmona dice:

    Hola Jose,

    se me presenta un problema, al cargar en el DIV destino el archivo HTML indicado en el URL del AJAX, los enlaces pierden su funcionalidad. Si cargo el HTML individualmente funcionan correctamente, pero no a través de la carga del AJAX.

    Qué podrá ser? Como se solventa?

  23. pedro dice:

    el enlace carga sin refrescar pero si le doy actualizar a la pagina este vuelve a la pagina inicial, como podria hacer para que al decir refrescar conserve la pagina donde estoy y no regrese al inicio

  24. Gabriela dice:

    Se puede utilizar ese código con Zonas Interactivas de una imagen?

  25. luis dice:

    Hola como estas gracias por dar estos aportes varios de ellos me han ayudado en diferentes proyectos. ahora tengo un problema con un codigo exacatamente igual a este

    te comento tengo el problema siguiente: hago la misma funciona que se genere en un php y luego lo muestro en la div y dentro de unas TABS bueno el porblema es al cambiar de TAB el estilo que le genereo a un scroll se pierde, solo se recupera si actualizo la pagina tendras idea por que pasa esto

  26. David C dice:

    Muchas gracias por el código y la ayuda! me fue muy útil!
    una pregunta nada más…
    me gustaría saber como puedo poner una imagen de carga mientras se esta cargando el contenido del div?
    me puedes ayudar con eso?
    saludos!

  27. Luis Mejías dice:

    Hola Jose Aguilar, soy un poco nuevo en todo eso, sobre todo en Ajax y javaScript; el ejemplo me parece super útil para lo que estoy haciendo, sin embargo intento hacer que funcione pero nada, hago los archivos php con el contenido en html que de seguro no se deberia hacer asi pero bueno es algo asi:
    <?php /*presentation.php*/
    PRINT <<<HERE

    Esta es la presentación
    Hola… soy la presetación

    HERE;
    ?>

    Quisiera saber que tienes en los archivos .php que estan en la carpeta inc. Especificamente Contact.php, porque necesito cargar varios formularios distintos en la misma pagina sin tenener que recargar en mi aplicación y este ejemplo me ayudaria mucho. Muchas Gracias de ante mano y felicidades por el blog. Saludos desde Venezuela!

    • Jose Aguilar dice:

      Hola buenas tardes,

      En los archivos .php tan solo hago echo de todo lo que quiero mostrar como por ejemplo:

      echo ‘

      y lo que sigue según lo que se quiera

      Saludos

  28. Rafa dice:

    Me encanta tu blog Jose, yo soy economista pero al igual que tú a veces siento que mi rama es diferente… apenas he acabado la carrera y creo que me gusta mucho más programar que mi vocación… lástima no haberme dado cuenta antes de empezar la carrera… también es verdad que tampoco sabía nada de este “mundillo”. Un saludo Jose y gracias por subir estas cosas tan chulas, espero poder dominar algún dia javascript y jquery, porque se pueden hacer cosas impresionantes.

  29. Roberto Carlos dice:

    Hola muy buen tuto, podria aplicar este mismo concepto pero en lugar de usar un div () podria pintar el resultado dentro de un iframe?

  30. iramsej dice:

    Hola jose saludos. Estoy tratanto de realizar este ejemplo aplicándolo en un documento xhtml y no me funciona , Lo hice con iframe cambiando las versiones y nada que me agarra. por favor sabrás por que sucede esto ?

  31. Froilan dice:

    me gusta tu blog. todo bien explicado

  32. Jhon Kenedy dice:

    Estaria mejor si funcionara el boton de REGRESAR UNA PAGINA ANTERIOR. DEL NAVEGADOR. HAY ALGUNA FORMA DE CORREGIR ESTO

  33. deivis dice:

    por que me da error cuando entro un pongo una direccion php que contenga mysql como ago para procesar una ruta que contenga consulta ejemplo. una notificaciones como la de facebook o un chat

  34. Hugo dice:

    Muy buen tutorial… pero te queria consultar si se puede insertar mas de un div… ya que en mi pagina web debo cargar segun el usuario, por ejemplo,
    usuario1

    usuario2

    si pudieras indicarme como… ademas… como podria agregar el efecto accordion de jquery-ui

    Muy agradecido,

  35. Hugo dice:

    no mostro bien …
    usuario1
    div id ventas
    div id facturas

    usuario2
    div id compras
    div id facturas

  36. Luis dice:

    Para pasar una variable con POST como se haria?

    Saludos

  37. Milena Zapata dice:

    Hola Jose,
    El link del ejemplo mas completo en ejecución es lo que necesito lograr pero sin tener que crear archivos .php independientes.

    Yo estoy trabajando en un archivo .html y tengo un menú lateral con unos href que apuntan a otras divisiones dentro de la misma pagina ejm:


    Categorías

    Inicio
    Despedida año 2014
    Festival de carnes frias
    Navidad 2014

    Mi problema es que al cargar la pagina me muestra todo el contenido, al pinchar sobre los link del menú me llevan a cada una de las secciones, pero quiero que solo se muestre la división correspondiente a la opción del menú seleccionada.

    Si me puedes ayudar con esto te lo agradecería muchisimo.

  38. paolo dice:

    Esta bueno, pero me gustaría que arriba en la url se pongan los enlaces a los que hago referencia, y al refrescar pantalla si estoy en la última página de la web no vuelva a la primera, cómo sería eso ?

  39. Leumas90 dice:

    Buen Dia Jose-Aguiar,
    Excelente Pagina, Excelentes Aportes, pero quisiera hacerte dos planteamientos:
    1. – Saber si es posible usar el Metodo GET, en sustitucion de POST, para que arme el GET, por el resultado de la lectura de una BDD.
    CODIGO
    while($consulta)
    echo ‘‘.$consulta[1].’‘;

    Armaria
    Item1 – div-btn1
    Item2 – div-btn2
    Item32 – div-btn32

    y asi por cada registro encontrado en BDD, y que el JS lea y arme lo que se le mande por metodo GET, Ejemplo -url: “destino.php?id=$_GET[ItemXX]”- en vez de especificar UNO a UNO en JavaScript cada uno de los Items.

    2.- Una vez llama el ITEM 1 para un SUB-Menu con llamado a BDD, y refrescar con AJAX tal cual como lo muestra tu pagina de Ejemplo:
    http://www.jose-aguilar.com/scripts/jquery/menu-ajax

    Al Hacer Click, en Productos, en el muestra los Items de Productos, al hacer click a “Producto 1” no realiza ninguna accion.

    Me econtre ese detalle cuando ya he refrescado una Primera vez con Ajax, no permite refrescar nuevamente desde el mismo a un .

    • Jose Aguilar dice:

      Hola,

      1- Me parece que solo tienes que cambiar en el ajax el

      type: “POST”,

      por

      type: “GET”,

      2- Los productos de la página productos no tienen ningún enlace. Son enlaces de demostración.

      saludos

  40. maría josé dice:

    yo estoy haciendo esto mismo pero quiero que el resultado se muestre en otra hoja no en un contenedor, o sea quiero que se procese y se muestre en la otra hoja

  41. Hola,

    tengo este problema, cuando cargo en una div una pagina que sea un poquito pesada, y mientras carga el contenido, la pagina en general como que se cuelga, hasta que cargue todo el contenido de ese DIV.

    hay alguna manera de solucionar eso!

    Gracias.
    Davan Palma.

  42. Jorge dice:

    hola José
    muy buena tu pag y el codigo que colgaste me salvo la vida
    una semana googleando hasta q te encotre
    muchisimas gracias
    soy medio ciego en cuanto a jquerry y php pero me doy maña
    te comento implemente tu codigo para lo q yo queria y funciona perfectamente
    salvo un pequeño error q ni idea se donde esta
    cuando hago click sobre la imagen que me llevaria al archivo .php que cambaiaria el div central lo cambia pero me lleva al principio de la pag,
    no se si me explico, tengo el div central a los 3000px o 3500px de height cuando hago click me sube a 0px y tengo que bajar toda la pag para usar lo q esta en el div, espero q ue me entiendas, si lo entendes, hay alguna solucion?

  43. Salustina dice:

    Hola Jose Aguilar, excelente tu blog, felicidades!

    Me gustaria saber si me puedes ayudar en algo, estoy tratando de hacer algo similar con el div, de hecho estoy utilizando tu codigo, solo que no me carga la pagina, lo unico que encuentro diferente es que la pagina que quiero que me cargue es .html no .php . ¿Es necesario que mi pagina sea .php o como seria el codigo para cargar una .html?

    Gracias por leerme, te agradezco me puedas ayudar.

    • Jose Aguilar dice:

      Hola buenos días,

      En principio debe ser un archivo php. NO creo que se pueda hacer un ajax con un archivo html. Al menos no tiene sentido. Para tu caso tendrías que buscar otra solución o trabajar con archivos php.

      Saludos

  44. camilo dice:

    hola como seria cargar un div d eotra pagina sin dar click en ninguna parte

  45. Ronny dice:

    Hola José, gracias de antemano por la información, queria aplicar algo similar a esto pero en un frame para una web hecha con WordPress, el uso seria para colocar un reproductor de audio en un frame de manera que cuando el usuario navegue no se corte el audio, me podrias ayudar a aplicarlo para este particular? Muchas gracias hermano

  46. percy dice:

    gracias por tu aporte soy novato y me gustaria que ponas el css de tu ejemplo gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Ver más sobre