Método load() de jQuery ajax
Ejemplo
Usa solicitudes AJAX para cambiar el texto del elemento div:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Puedes encontrar más ejemplos TIY en la parte inferior de la página
Definición y uso
El método load() mediante solicitudes AJAX carga datos del servidor y coloca los datos devueltos en el elemento especificado.
Nota:还存在一个名为 load de jQuery eventométodo. ¿Cuál llama, depende de los parámetros.
sintaxis
load(url,data,function(response,status,xhr))
| parámetros | descripción |
|---|---|
| url | Especifica a qué URL se enviará la solicitud. |
| data | Opcional. Especifica los datos que se enviarán al servidor con la solicitud. |
| function(response, status, xhr) |
Opcional. Especifica una función que se ejecutará cuando se complete la solicitud. Parámetros adicionales:
|
Descripción detallada
Este método es la forma más sencilla de obtener datos del servidor. Es casi equivalente a $.get(url, data, success), con la diferencia de que no es una función global y tiene una función de devolución de llamada implícita. Cuando se detecta una respuesta exitosa (por ejemplo, cuando textStatus es "success" o "notmodified"), .load() establece el contenido HTML del elemento coincidente como los datos devueltos. Esto significa que la mayoría de los usos de este método serán muy simples:
$("#result").load("ajax/test.html");
Si se proporciona una función de devolución de llamada, esta se ejecutará después de que se complete el post-procesamiento:
$("#result").load("ajax/test.html", function() {
alert("Se realizó la carga.");
});
En los dos ejemplos anteriores, si el documento actual no contiene el ID "result", no se ejecutará el método .load().
Si se proporcionan datos en formato objeto, se utiliza el método POST; de lo contrario, se utiliza el método GET.
Carga de fragmentos de página
El método .load(), a diferencia de $.get(), nos permite especificar una parte del documento remoto a insertar. Esto se realiza a través de una sintaxis especial del parámetro url. Si esta cadena contiene un o más espacios, la cadena que sigue al primer espacio es el selector jQuery que determina el contenido a cargar.
Podemos modificar el ejemplo anterior para que use solo una parte del documento obtenido:
$("#result").load("ajax/test.html #container");
Si se ejecuta este método, se recuperará el contenido de ajax/test.html, pero luego, jQuery analizará el documento devuelto para encontrar elementos con ID de contenedor. Este elemento, junto con su contenido, se insertará en el elemento con ID de resultado, y el resto del documento recuperado se descartará.
jQuery utiliza la propiedad .innerHTML del navegador para analizar el documento recuperado y lo inserta en el documento actual. Durante este proceso, el navegador a menudo filtra elementos del documento, como los elementos <html>, <title> o <head>. Como resultado, los elementos recuperados por .load() pueden no ser completamente idénticos a los documentos recuperados directamente por el navegador.
Nota:Debido a las limitaciones de seguridad del navegador, la mayoría de las solicitudes "Ajax" siguen la política de origen; no se puede recuperar datos con éxito desde dominios, subdominios o protocolos diferentes.
Más ejemplos
Ejemplo 1
Cargar el contenido del archivo feeds.html:
$("#feeds").load("feeds.html");
Ejemplo 2
Similar a los ejemplos anteriores, pero enviando parámetros adicionales en forma de POST y mostrando un mensaje en caso de éxito:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Se han cargado las últimas 25 entradas en la fuente");
});
Ejemplo 3
Cargar la parte de navegación del lado derecho del artículo en una lista desordenada:
Código HTML:
<b>Enlaces de jQuery:</b> <ul id="links"></ul>
Código de jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Más ejemplos de TIY
- Generar solicitudes AJAX y enviar datos a través de estas solicitudes
- Cómo enviar datos mediante solicitudes AJAX utilizando parámetros de datos. (Este ejemplo se explica en el tutorial de AJAX.).
- Generar solicitudes AJAX y usar funciones de retroalimentación
- Cómo manejar los resultados de datos provenientes de solicitudes AJAX utilizando parámetros de función.
- Generar solicitudes AJAX con errores
- Cómo manejar errores en solicitudes AJAX utilizando parámetros de función (usando parámetros de XMLHttpRequest).
