Il metodo load() AJAX di jQuery

Il metodo load() di jQuery

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

Il metodo load() carica dati dal server e li inserisce nell'elemento selezionato.

Grammatica:

$("}}selettore).load(URL,data,callback);

Obbligatorio URL Il parametro specifica l'URL che si desidera caricare.

Parametro opzionale data Il parametro specifica una raccolta di coppie chiave/valore di stringhe da inviare con la richiesta.

Parametro opzionale callback Il parametro è il nome della funzione da eseguire una volta completato il metodo load().

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

<h2>jQuery e AJAX è DIVERTENTE!!!</h2>
<p id="p1">Questo è un testo in un paragrafo.</p>

Di seguito un esempio che carica il contenuto del file "demo_test.txt" nel div specificato:

Esempio

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

Prova tu stesso

Puoi anche aggiungere un selettore jQuery ai parametri dell'URL.

Di seguito un esempio che carica il contenuto dell'elemento con id="p1" del file "demo_test.txt" nel div specificato:

Esempio

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

Prova tu stesso

Il parametro opzionale callback specifica la funzione di callback da eseguire una volta completato il metodo load(). La funzione di callback può impostare diversi parametri:

  • responseTxt - Contiene il contenuto del risultato quando la chiamata è riuscita
  • statusTXT - Contiene lo stato della chiamata
  • xhr - Contiene l'oggetto XMLHttpRequest

Di seguito un esempio che mostra una finestra di messaggio alla fine del completamento del metodo load(). Se il metodo load() è stato eseguito con successo, viene visualizzato "Contenuto esterno caricato con successo!", altrimenti viene visualizzato un messaggio di errore:

Esempio

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Contenuto esterno caricato con successo!");
    if(statusTxt=="error")
      alert("Errore: "+xhr.status+": "+xhr.statusText);
  });
});

Prova tu stesso

Manuale di riferimento di jQuery AJAX

Per una guida completa dei metodi AJAX, visita il nostro Manuale di riferimento di jQuery AJAX.