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á:
[cc lang=»html»]
[/cc]
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:
[cc lang=»javascript»]
$(«#boton»).click(function(event) {
$(«#htmlext»).load(‘ejemplo1.html’);
});
[/cc]
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».
[cc lang=»javascript»]
$(«#boton2»).click(function(event) {
$(«#htmlext2»).load(‘ejemplo1.html div#cargar-soloesto’);
});
[/cc]
.load() tambien nos permite interactuar con archivos php, asi como enviar variables via «POST»:
[cc lang=»javascript»]
$(«#boton3»).click(function(event) {
$(«#phpextget»).load(‘ejemplo2.php’,{
‘var1′:’Valor 1’,
‘var2′:’Valor 2’
});
});
[/cc]
[social-download button_id=»a8357ad76c6889d3f» dl_id=»https://www.miguelmanchego.com/samples/2015/recargarpaginajquery/recargarpaginajquery.zip» theme=»blue» message=»Comparte el post para descargar todos los archivos de los ejemplos» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]
