Ya están lejos los tiempos dónde un site de Internet estaba compuesto solo por páginas estáticas HTML. Ahora la mayoría se componen en los servidores, mezclando información, ficheros, datos almacenados,… Si bien podemos tener la necesidad de tener dinamismo en la carga de datos de la parte cliente. Para ello, jQuery nos dará la capacidad de cargar un fichero de forma dinámica.
Lo primero que tenemos que hacer es crear un fichero HTML de test. Este lo llamaremos test.html. Ahora pasamos a crear la página que nos permite cargar un fichero con jQuery. En esta, lo primero que vamos a hacer es cargar la librería jQuery.
Como en la mayoría de las ocasiones utilizamos la función ready para esperar que se cargue la página. Dentro de la función ready será donde insertemos nuestro código jQuery.
$(document).ready(function(){
$("#carga").click(function() {
// Código
});
});Vemos que el código que nos va a permitir cargar un fichero con jQuery se lo asociaremos al evento click de un elemento que llevará el ID carga. Por ejemplo, pondremos un botón…
Además añadiremos una capa, a la cual daremos el ID texto, sobre la cual cargaremos el fichero HTML.
Ya solo nos quedará cargar el fichero. Para ello utilizamos la función .load(), a la cual pasamos el nombre del fichero a cargar. En nuestro caso el fichero test.html
$("#carga").click(function() {
$("div#texto").load("test.html");
});