Metoda load() jQuery
Przykład
Zmiana tekstu elementu div za pomocą żądania AJAX:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
definicja i użycie
metoda load() ładuje dane z serwera za pomocą żądania AJAX i umieszcza zwrócone dane w określonym elemencie.
Komentarz:istnieje również nazwa load jQuery zdarzeniemetoda. Wybór zależy od parametrów.
gramatyka
load(url,data,funkcja(response,status,xhr))
| parametry | opis |
|---|---|
| url | Określa, do której URL ma być wysłane żądanie. |
| data | Opcjonalne. Dane, które są wysyłane do serwera wraz z żądaniem. |
| function(response,status,xhr) |
Opcjonalne. Funkcja, która jest uruchamiana po zakończeniu żądania. Dodatkowe parametry:
|
Szczegółowe wyjaśnienie
Ta metoda jest najprostszym sposobem pobierania danych z serwera. Jest prawie równoważna z $.get(url, data, success), różni się tym, że nie jest funkcją globalną i ma ukryty funkcja zwrotna. Gdy wykrywa pomyślną odpowiedź (np. gdy textStatus wynosi "success" lub "notmodified"), .load() ustawia zawartość HTML elementu na zwróconych danych. Oznacza to, że większość użycia tej metody będzie bardzo prosta:
$("#result").load("ajax/test.html");
Jeśli dostarczony jest funkcja zwrotna, zostanie ona wykonana po wykonaniu post-processing:
$("#result").load("ajax/test.html", function() {
alert("Wczytanie zostało wykonane.");
});
W powyższych dwóch przykładach, jeśli bieżący dokument nie zawiera ID "result", metoda .load() nie zostanie wykonana.
Jeśli dostarczone dane są obiektem, używa się metody POST; w przeciwnym razie używa się metody GET.
Ładowanie części strony
Metoda .load(), w przeciwieństwie do $.get(), pozwala określić część zdalnego dokumentu do wstawienia. To jest realizowane przez specjalny语法 w parametrze url. Jeśli ciąg znaków zawiera jedną lub więcej spacji, ciąg znaków po pierwszej spacji jest jQuery selektorem, który określa ładunek do załadowania.
Możemy zmodyfikować powyższy przykład, aby użyć części uzyskanego dokumentu:
$("#result").load("ajax/test.html #container");
Jeśli wykonuje się ta metoda, zwróci treść pliku ajax/test.html, ale potem jQuery przeanalizuje zwrócony dokument, aby znaleźć elementy z ID kontenera. Ten element, wraz z jego treścią, zostanie wstawiony do elementu z ID wyniku, reszta zwróconego dokumentu zostanie odrzucona.
jQuery używa właściwości .innerHTML przeglądarki do analizowania zwróconego dokumentu i wstawiania go do bieżącego dokumentu. W tym procesie przeglądarka często filtruje elementy z dokumentu, takie jak elementy <html>, <title> lub <head>. W rezultacie, elementy pobrane za pomocą .load() mogą różnić się od dokumentu pobranego bezpośrednio przez przeglądarkę.
Komentarz:Z powodu ograniczeń bezpieczeństwa przeglądarki, większość żądań "Ajax" przestrzega polityki samego źródła; żądania nie mogą pomyślnie pobrać danych z różnych domen, pod domen lub protokołów.
Więcej przykładów
Przykład 1
Załaduj zawartość pliku feeds.html:
$("#feeds").load("feeds.html");
Przykład 2
Podobnie jak powyższy przykład, ale wysyłając dodatkowe parametry w formacie POST i wyświetlając informację na sukcesie:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Ostatnie 25 wpisów w kanale zostały załadowane");
});
Przykład 3
Załaduj część nawigacji bocznej artykułu do listy nieuporządkowanej:
Kod HTML:
<b>Linki jQuery:</b> <ul id="links"></ul>
Kod jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Więcej przykładów TIY
- Tworzenie żądań AJAX i wysyłanie danych za pomocą tego żądania
- Jak używać parametrów danych do wysyłania danych za pomocą żądań AJAX. (Ten przykład został wyjaśniony w lekcji AJAX.)
- Tworzenie żądań AJAX i użycie funkcji zwrotnych
- Jak używać parametrów funkcji do przetwarzania wyników danych z żądań AJAX.
- Tworzenie żądań AJAX z błędami
- Jak używać parametrów funkcji do przetwarzania błędów w żądaniach AJAX (używając parametrów XMLHttpRequest).
