Metodo load() di jQuery ajax
Esempio
Cambia il testo dell'elemento div utilizzando una richiesta AJAX:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Puoi trovare più esempi di TIY nella parte inferiore della pagina.
Definizione e uso
Il metodo load() di jQuery carica dati dal server tramite una richiesta AJAX e mette i dati restituiti nell'elemento specificato.
Nota:esiste anche un nome chiamato load di jQuery eventometodo. Quale chiamare, dipende dal parametro.
sintassi
load(url,data,funzione(response,status,xhr))
| parametro | descrizione |
|---|---|
| url | Specifica quale URL inviare la richiesta. |
| data | Opzionale. Specifica i dati da inviare al server con la richiesta. |
| function(response,status,xhr) |
Opzionale. Specifica la funzione da eseguire quando la richiesta è completata. Parametri aggiuntivi:
|
Spiegazione dettagliata
Questo metodo è il modo più semplice per ottenere dati dal server. È quasi equivalente a $.get(url, data, success), la differenza è che non è una funzione globale e ha un callback implicito. Quando si rileva una risposta di successo (ad esempio, quando textStatus è "success" o "notmodified"), .load() imposta il contenuto HTML dell'elemento abbinato ai dati restituiti. Questo significa che la maggior parte dell'uso di questo metodo sarà molto semplice:
$("#result").load("ajax/test.html");
Se viene fornito una funzione di callback, questa verrà eseguita dopo il post-processing:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
Nei due esempi sopra, se il documento corrente non contiene l'ID "result", il metodo .load() non verrà eseguito.
Se i dati forniti sono un oggetto, viene utilizzato il metodo POST; altrimenti, viene utilizzato il metodo GET.
Caricamento di frammenti di pagina
Il metodo .load(), diversamente da $.get(), ci permette di specificare una parte del documento remoto da inserire. Questo è realizzato attraverso una sintassi speciale del parametro url. Se la stringa contiene uno o più spazi, la stringa che segue il primo spazio è il selettore jQuery che determina il contenuto da caricare.
Possiamo modificare l'esempio sopra per utilizzare una parte del documento ottenuto:
$("#result").load("ajax/test.html #container");
Se eseguita questa metodo, verrà restituito il contenuto di ajax/test.html, tuttavia, jQuery analizzerà il documento restituito per trovare l'elemento con l'ID del contenitore. Questo elemento, insieme al suo contenuto, verrà inserito nell'elemento con l'ID del risultato, e il resto del documento restituito verrà scartato.
jQuery utilizza l'attributo .innerHTML del browser per analizzare il documento recuperato e inserirlo nel documento corrente. Durante questo processo, il browser spesso filtra gli elementi dal documento, come gli elementi <html>, <title> o <head>. Di conseguenza, gli elementi recuperati da .load() possono non essere identici a quelli recuperati direttamente dal browser.
Nota:A causa dei limiti di sicurezza del browser, la maggior parte delle richieste "Ajax" segue la politica di origine; le richieste non possono recuperare dati con successo da domini, sottodomini o protocolli diversi.
Più esempi
Esempio 1
Caricare il contenuto del file feeds.html:
$("#feeds").load("feeds.html");
Esempio 2
Simile all'esempio sopra, ma invia parametri aggiuntivi in forma POST e mostra un messaggio di successo:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Sono state caricate le ultime 25 voci nel feed");
});
Esempio 3
Caricare la parte di navigazione laterale dell'articolo in una elenco non ordinato:
Codice HTML:
<b>Link jQuery:</b> <ul id="links"></ul>
Codice jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Più esempi TIY
- Generare una richiesta AJAX e inviare dati tramite questa richiesta
- Come utilizzare i parametri data per inviare dati attraverso una richiesta AJAX. (Questo esempio è spiegato nel tutorial AJAX.)
- Generare una richiesta AJAX e utilizzare la funzione di callback
- Come utilizzare i parametri della funzione per gestire i risultati dei dati provenienti dalla richiesta AJAX.
- Generare una richiesta AJAX con errori
- Come utilizzare i parametri della funzione per gestire gli errori nelle richieste AJAX (utilizzando i parametri XMLHttpRequest).
