Cargar un fichero con jQuery Enero 25, 2009
Publicado por lineadecodigo en : jQuery , trackbackYa 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.
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
Articulos Similares:
- Hola Mundo con jQuery
- Peticiones AJAX con jQuery
- Modificar el estilo con jQuery
- Modificar el contenido de una capa con jQuery
- Número de elementos de una lista con jQuery
|- Descargar el código
|- Reportar error en el código
|- Foro sobre jQuery
Enviar entrada por email
| 
Imprimir
| 4160 visitas
(Todavia sin evaluar)
Loading ...
Comentarios»
Hola te queria agradecer por el codigo, me sirvio de mucho, lo modifique para poder cargar paginas distintas desde un menu.
Muy buen TIP en realidad muy simple de usar y nos quita muchos dolores de cabeza… aquí os dejo un bonito efecto de fade al cargar las páginas:
$(document).ready(function(){
$(“#carga”).click(function() {
$(“div#texto”).hide().load(“test.html”).fadeIn(“slow”);
//Le damos efecto
});
});
Salu2
Bueno esta es la modificacion que realice
function cargalapagina(pagina){
var paginacargada = pagina;
$(“div#derecha”).load(paginacargada);
}