jQuery - Metodo AJAX load()


jQuery metodo load()

Il metodo jQuery load()è un metodo AJAX semplice ma potente.

Il load()metodo carica i dati da un server e inserisce i dati restituiti nell'elemento selezionato.

Sintassi:

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

Il parametro URL richiesto specifica l'URL che desideri caricare.

Il parametro data opzionale specifica un set di coppie chiave/valore di querystring da inviare insieme alla richiesta.

Il parametro di callback facoltativo è il nome di una funzione da eseguire dopo il load()completamento del metodo.

Ecco il contenuto del nostro file di esempio: "demo_test.txt":

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

L'esempio seguente carica il contenuto del file "demo_test.txt" in un <div>elemento specifico:

Esempio

$("#div1").load("demo_test.txt");

È anche possibile aggiungere un selettore jQuery al parametro URL.

L'esempio seguente carica il contenuto dell'elemento con id="p1", all'interno del file "demo_test.txt", in un <div>elemento specifico:

Esempio

$("#div1").load("demo_test.txt #p1");

Il parametro facoltativo callback specifica una funzione di callback da eseguire al load()completamento del metodo. La funzione di callback può avere diversi parametri:

  • responseTxt- contiene il contenuto risultante se la chiamata ha esito positivo
  • statusTxt- contiene lo stato della chiamata
  • xhr- contiene l'oggetto XMLHttpRequest

Nell'esempio seguente viene visualizzata una finestra di avviso al termine del metodo load(). Se il load()metodo ha esito positivo, viene visualizzato "Contenuto esterno caricato correttamente!" e, in caso contrario, viene visualizzato un messaggio di errore:

Esempio

$("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);
  });
});

jQuery AJAX Riferimento

Per una panoramica completa di tutti i metodi jQuery AJAX, vai al nostro jQuery AJAX Reference .