jQuery: Llamar HTML sin recargar la página

Muchas veces queremos llamar HTML sin necesidad de tener que actualizar toda la página, para ello jQuery nos brinda la funcion “.load()”.

Para explicar esta función haremos un pequeño ejemplo:
Necesitamos un botón o link para que en el evento click se cargue el HTML, y un contenedor “div” donde queremos que se muestre lo que cargaremos.
El HTML a usar será:

1
2
3
4
<input type="button" id="boton" value="Cargar html externo" /> <input type="button" value="Reiniciar" class="reiniciar" />
    <div id="htmlext" class="recargar">
            Aqui se cargará el contenido
    </div>

Para ver el ejemplo en funcionamiento podemos ir AQUÍ

La estructura para load() es, primero el contenedor “$(“htmltext”)”, de ahi “.(load)” y la url del html a cargar “(‘ejemplo1.html’)”;
Entonces en el evento click del botón pondremos lo siguiente:

1
2
3
$("#boton").click(function(event) {
        $("#htmlext").load('ejemplo1.html');
    });

Aparte de esto .load() nos permite llamar solo parte del HTML. Para ello agregaremos a la URL el nombre del div que queremos cargar “div#cargar-soloesto”.

1
2
3
$("#boton2").click(function(event) {
       $("#htmlext2").load('ejemplo1.html div#cargar-soloesto');
    });

.load() tambien nos permite interactuar con archivos php, asi como enviar variables via “POST”:

1
2
3
4
5
6
$("#boton3").click(function(event) {
        $("#phpextget").load('ejemplo2.php',{
            'var1':'Valor 1',
            'var2':'Valor 2'
            });  
    });

Comparte el post para descargar todos los archivos de los ejemplos


2 comentarios en “jQuery: Llamar HTML sin recargar la página

Deja un comentario

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

Time limit is exhausted. Please reload the CAPTCHA.