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