Ajax con jQuery: el método load()

17 COMENTARIOS -  Publicado hace 12 meses -  Clasificado en: , ,

jQuery ofrece bastantes funcionalidades Ajax que nos pueden facilitar mucho la tarea de enviar y recoger peticiones asíncronas al servidor. Quizá la sentencia más simple de JQuery para cargar contenido mediante Ajax es load(). Este post trata de ofrecer una explicación sencilla de este comando, así como de unos cuantos ejemplos sencillos pero representativos de su uso. Sintaxis: 

load(url,parametros,callback)

Inicia una solicitud Ajax a la URL especificada con parámetros opcionales. Se puede especificar una función de callback que puede ser invocada cuando la solicitud se completa. El texto de respuesta reemplaza el contenido de todos los elementos coincidentes.

Argumentos:

  • url: La URL a la que la solicitud es enviada.
  • parámetros: Un objeto cuyas propiedades son serializadas en una serie de parámetros codificados correctamente y que se pasan a la solicitud. Se utiliza si se especifica, que la petición se hace utilizando el método POST. Se omite si se utiliza el método GET.
  • callback: Una función invocada después de que la solicitud ha sido procesada.

Por ejemplo 

$("#contenido").load("archivo.html");

Cargaría el contenido de "archivo.html" en el div "contenido". Un ejemplo un poco más elaborado y completo podría ser el siguiente: 

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>JQuery Ajax</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript">

  $(document).ready(function() {
$(".boton").click(function(event) {
$("#caja").load('carga.html',aviso());
});
});
function aviso(){
alert('La solicitud ha sido procesada');
}
</script>
</head>
<body>
<p><input name="bt1" type="button" value="CARGA CONTENIDO" class="boton"/></p>
<div id="caja" style="padding:5px;border:1px solid #CCC;">
</div>
</body>
</html>

Ver ejemplo en funcionamiento » »

Aunque fácil de usar, este comando tiene algunos matices importantes. Por ejemplo, cuando se alimenta el argumento "parámetros" la solicitud se realiza mediante el método HTTP POST, de lo contrario, se realiza mediante una petición GET. Si queremos realizar una solicitud GET con los parámetros, podemos incluirlos en la URL. En este último caso deberemos asegurarnos de que la url esté correctamente codificada.

En el siguiente ejemplo utilizamos el valor del atributo "value" de tres botones para pasarle a un archivo .php la acción que desearíamos ejecutar. El archivo que invoca mediante Ajax el archivo .php sería: 

<?php
if($_POST['acc']=='EDITAR'){
	// ACCIONES DE EDICION
	echo 'LA ACCION SOLICITADA ES EDITAR';
}elseif($_POST['acc']=='NUEVO'){
	// ACCIONES DE CREACION
	echo 'LA ACCION SOLICITADA ES NUEVO';
}else{
	// ACCIONES DE ELIMINACION
	echo 'LA ACCION SOLICITADA ES BORRAR';
}
?>

Y el archivo "solicitud.php" se encargaría de recoger los parámetros por POST y asignar las acciones pertinentes: 

<?php
if($_POST['acc']=='EDITAR'){
	// ACCIONES DE EDICION
	echo 'LA ACCION SOLICITADA ES EDITAR';
}elseif($_POST['acc']=='NUEVO'){
	// ACCIONES DE CREACION
	echo 'LA ACCION SOLICITADA ES NUEVO';
}else{
	// ACCIONES DE ELIMINACION
	echo 'LA ACCION SOLICITADA ES BORRAR';
}
?>

Ver ejemplo en funcionamiento » »

La mayoría de veces utilizaremos el comando load() para inyectar el contenido completo de la respuesta, pero puede ocurrir que deseemos filtrar la respuesta. jQuery nos permite especificar un selector en la URL para filtrar los elementos que van a ser inyectados. Por ejemplo: 

$('#contenido').load('recurso.html #bloque_1')

La respuesta contenida en el div "bloque_1" del fichero "recurso.html", será cargada en el div "contenido".

En el siguiente ejemplo se cargan unicamente los enlaces contenidos en el fichero "carga_filtrada.html". 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Ajax
<script type="text/javascript" src="jquery-1.3.2.min.js">
<script type="text/javascript">
$(document).ready(function() {
	$(".boton").click(function(event) {
			  $("#caja").load('carga_filtrada.html a');
	});
});
</script>
<style type="text/css">
a {display:block;}
</style>
</head>
<body>




</div>
</body>
</html>

Y el fichero "carga_filtrada.html" sería: 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum sed diam nonumy eirmod tempor invidunt ut labor. Stet clita kasd gubergren consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua

Ver ejemplo en funcionamiento » »

Algunas entradas relacionadas:

También te puede interesar:

COMENTARIOS

Publicado hace 12 meses
Arturo -   http://acerca.blogspot.com

Muchas gracias por tan explicativo y tan claro manual sobre LOAD de jQuery. Justamente estaba a punto de buscar ayuda en el Web sobre esta función para usarla con ASP.NET MVC y por suerte en mis FEED encontre tan genial manual.

saludos
Publicado hace 12 meses
j0an -   http://www.mediobestia.com

excelentisimo post, muy explicativo y claros ejemplos!

estaría muy bueno uno asi de load getJSON
Publicado hace 12 meses
Francisco -   http://www.webintenta.com

Gracias. A ver si tengo tiempo y preparo uno para jQuery y JSON.

Saludos.
Publicado hace 12 meses
VINFO -  
Excelente tutorial, me ayudo demasiado para poder ingresar en este mundo de jquery. felicitaciones
Publicado hace 7 meses
Guillermo Perez -   http://libasoles.com.ar

Muchas gracias. Me diste idea de como utilizar mas ampliamente ajax con Jquery, filtrando contenidos.

Tengo una duda sobre las cargas de contenido via Ajax. Y es que noto rarezas cuando manipulo el DOM desde la sección "success" de ajax. Se que no es el caso de load(), pero me inquieta.

Por ejemplo, las variables que defino on success no las puedo tomar desde fuera, y a veces tuve que forzar las cosas e incluir codigo que tenia suelto dentro del Ajax "success" para que funcionase.
Publicado hace 5 meses
Pablo -   http://www.indi.es

Muy buen post, pero tengo una pregunta, ¿al cargar una página con load que dentro lleve, por ejemplo, ibox o superbox!, cómo se hace para que coja esos scripts?
Gracias
Publicado hace 5 meses
Francisco -   http://www.webintenta.com

En principio no tiene que haber ningún problema. Recuerda que estás haciendo una carga sobre una página por lo que la segunda página -la que cargas- no tiene que tener etiquetas html, body,...

En esta web tienes un par de comprobaciones que te pueden ser útiles:

http://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file

Saludos.
Publicado hace 5 meses
Pablo -   http://www.indi.es

Muchas gracias Francisco, las comprobaciones funcionan perfectamente pero la cosa sigue sin ir. Seguiré buscando. Saludos y ya estás en mis marcadores.
Publicado hace 5 meses
marcelo -  
un pregunta como puedo hacer la parte de cargar en mi tabla celdas con lectura desde mi base de datos. Por decirte un campo NOMBRE, BOTON, y luego valida nombre, y adiciona a mi tabla sin la recarga de la página y desde la base de datos el nuevo nombre incluido a mi tabla con sus respectivas celdas.

Help me please.
Publicado hace 5 meses
Francisco -   http://www.webintenta.com

Tendrás que cargar, en vez de un html, un archivo php,asp o similar que se encargue de todo lo que dices.
Publicado hace 5 meses
Pablo -   http://www.indi.es

Para solucionar el tema del comentario 6 he incluido el javascript de configuración/inicio de superbox! (plug-in jquery) desde el html que cargo con load. No se si es muy ortodoxo pero funciona.
Publicado hace 4 meses
Ricardo -   http://www.inklude.com

Enhorabuena a los creadores de esta página, llevo un par de dias revisando todo el contenido que teneis publicado y es de muy gran utilidad y calidad... Desde luego este es un blog de referencia sobre tecnologias web, muy útil!
Publicado hace 2 meses
Vicente Soto Liemann -  
Gracias por sus aportes, han sido de gran utilidad. Una preguntica: Como hago para mostrar el contenido de una variable creada en php, en lugar de una pagina html. Gracias.
Publicado hace 2 meses
Francisco -   http://www.webintenta.com

Hola,
Se hace del mismo modo y mostrará el resultado de la ejecución del php. Si por ejemplo en el php tenemos:

echo "Hola";

Nos mostraría un Hola al realizar la carga con jQuery.

Saludos.
Publicado hace 2 meses
Unihost Brasil - Webhosting -   http://unihostbrasil.com.br

Muchas gracias por su manual sobre el excelente jQuery.

--
Fabio B.
Unihost Brasil
Publicado hace 1 mes
carlos -  
Si añadimos este código, nos mostrará la imagen "loading" mientras que llega el contenido (lo pongo porque me a mi me a resultado muy práctico):

# $(".boton").click(function(event) {
var imagen = "";
# $("#caja").html(imagen).load('carga.html',aviso());
# });
Publicado hace 1 mes
Carlos -  
//var imagen debe contener la ruta a la imagen de preload :-)
var imagen = "";
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com