Los últimos tutoriales de desarrollo web
 

jQuery - AJAX load() Method


jQuery load() Método

El jQuery load() método es simple, pero poderoso método AJAX.

Las load() carga los datos de método de un servidor y pone los datos devueltos en el elemento seleccionado.

Sintaxis:

$(selector).load(URL,data,callback);

El parámetro URL requerida especifica la URL que desea cargar.

El parámetro de datos opcional especifica un conjunto de querystring de pares clave / valor para enviar junto con la solicitud.

El parámetro callback opcional es el nombre de una función que se ejecuta después de la load() se completa método.

Aquí está el contenido de nuestro archivo de ejemplo: "demo_test.txt" :

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

El ejemplo siguiente carga el contenido del archivo "demo_test.txt" en un determinado <div> elemento:

Ejemplo

$("#div1").load("demo_test.txt");
Inténtalo tú mismo "

También es posible añadir un selector jQuery al parámetro URL.

El ejemplo siguiente carga el contenido del elemento con id="p1" , dentro del archivo "demo_test.txt" , en una específica <div> elemento:

Ejemplo

$("#div1").load("demo_test.txt #p1");
Inténtalo tú mismo "

El parámetro callback opcional especifica una función de devolución de llamada para funcionar cuando la load() se completa método. La función de devolución de llamada puede tener diferentes parámetros:

  • responseTxt - contiene el contenido resultante si la llamada se realiza correctamente
  • statusTxt - contiene el estado de la llamada
  • xhr - contiene el XMLHttpRequest objeto

El siguiente ejemplo muestra un cuadro de alerta después de la load() método finaliza. Si la load() método ha tenido éxito, se muestra "External content loaded successfully!" , Y si falla se muestra un mensaje de error:

Ejemplo

$("button").click(function(){
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
        if(statusTxt == "success")
            alert("External content loaded successfully!");
        if(statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});
Inténtalo tú mismo "

jQuery AJAX Referencia

Para una visión completa de todos los métodos de jQuery AJAX, por favor vaya a nuestra jQuery AJAX referencia .