Utilizando jQuery podemos cargar el contenido de un archivo en un div con unas pocas líneas de código.

Para ello primero tenemos que cargar la librería jQuery, podemos hacerlo utilizando la librería de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Y ahora creamos la función:

function cargarDiv(div,url)
{
	$(div).load(url);
}

“La variable div” es la referencia del DIV donde vamos a cargar el archivo.

Para utilizar la función hacemos lo siguiente:

cargarDiv("#contenido","archivo.php");

#contenido” como ya sabemos es el DIV donde cargará el contenido del archivo “archivo.php“.

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


  • Oski

    Deberian poner un ejemplo de como usarlo :/

  • Daniel

    la libreria librería jQuery va donde se carga el div o donde se escribe la funcion en js?

    • admin

      Así quedaría el documento HTML con los ejemplos de arriba:

      
      <html>
      
      <head>
      
      <title>El título de mi página</title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      
      <script>
      
            jQuery.fn.cargar = function(url) {
                  $(document).ready(function(){
                        $("#contenido").load(url);
                  });
            };
      
            $(document).ready(function(){
      
                  $("#contenido").cargar("archivo.php");
      
            });
           
      </script>
      
      
      </head>
      
      <body>
      
            <div id="contenido"></div>
      
      </body>
      
      
      </html>
      
      
  • Christian Miranda

    Excelente, me ha funcionado de maravillas, pero al enviar contenido de otro pagina externa se me queda en el div y si ejecuto nuevamente se me queda el resultado anterior como hago para borrar la información del div, gracias

    • Alberto

      $(“#midiv”).html(“”);

  • Arnau

    Buena idea, crear funciones nuevas siempre es bueno.
    Una cosa, no seria mejor por eso que en vez de la línea:
    $(“#contenido”).load(url);

    Fuera:
    $(this).load(url);

    Lo digo porque así podrías reaprovechar el código con cualquier div o elemento, no importa que id tenga, por lo tanto podrías usarlo cómo bien has escrito:

    $(“#contenido”).cargar(“archivo.php”);
    o bien…
    $(“#info”).cargar(“archivo.php”);
    etc…

    Un saludo.

    • Alberto

      Se podría hacer como tú dices, pero he actualizado la función para que sea mucho más sencillo.

      Un saludo!

  • ADAIR ARAQUE

    excelente, tenia otra forma de hacerlo pero esta me funciono con bootstrap. gracias.

    function mostrarContenido(url){
    var contenedor;
    contenedor = document.getElementById(“contenedor”);
    $(contenedor).load(url);
    }

  • san

    Funciona de maravilla si la pagina php que se carga no tiene argumentos con ?arg=dato&arg2=dato2&… que se requiere o que me falta para que funcione.

  • Matias Sandoval Alarcon

    y si quisiera mantener el css del div que estoy cargando? como lo hago?

    • Alberto

      Para hacer eso tendrías que incluirlo de nuevo en el archivo que cargas con ajax.

  • Brayan Gutierrez Caicedo

    Tengo un problema, cuando cargo un .php que reproduce un vídeo y luego cargo otro .php en el mismo div, la conexión del vídeo aun esta como Keep Alive y sigue descargando.

    ¿Hay Alguna forma de detener esa descarga cuando cargue otro .php al div? Gracias de antemano.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR