jQuery - metoda AJAX load()


Metoda jQuery load()

Metoda jQuery load()jest prostą, ale potężną metodą AJAX.

Metoda load()ładuje dane z serwera i umieszcza zwrócone dane w wybranym elemencie.

Składnia:

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

Wymagany parametr adresu URL określa adres URL, który chcesz załadować.

Opcjonalny parametr data określa zestaw par klucz/wartość ciągu zapytania do wysłania wraz z żądaniem.

Opcjonalny parametr wywołania zwrotnego to nazwa funkcji, która ma zostać wykonana po zakończeniu load()metody.

Oto zawartość naszego przykładowego pliku: "demo_test.txt":

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

Poniższy przykład ładuje zawartość pliku „demo_test.txt” do określonego <div>elementu:

Przykład

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

Możliwe jest również dodanie selektora jQuery do parametru URL.

Poniższy przykład ładuje zawartość elementu z id="p1" wewnątrz pliku "demo_test.txt" do określonego <div>elementu:

Przykład

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

Opcjonalny parametr wywołania zwrotnego określa funkcję wywołania zwrotnego do uruchomienia po zakończeniu load()metody. Funkcja callback może mieć różne parametry:

  • responseTxt- zawiera wynikową treść, jeśli połączenie się powiedzie
  • statusTxt- zawiera status połączenia
  • xhr- zawiera obiekt XMLHttpRequest

Poniższy przykład wyświetla okno alertu po zakończeniu działania metody load(). Jeśli load()metoda się powiodła, wyświetla komunikat „Zawartość zewnętrzna załadowana pomyślnie!”, a jeśli się nie powiedzie, wyświetla komunikat o błędzie:

Przykład

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

Odniesienie do jQuery AJAX

Aby uzyskać pełny przegląd wszystkich metod jQuery AJAX, przejdź do naszego jQuery AJAX Reference .