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 |
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' }); }); |
[social-download button_id=»a8357ad76c6889d3f» dl_id=»http://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»/]
muy bien