Lekcja 14: AJAX w jQuery - Metody Skrótowe ($.get(), $.post(), $.getJSON(), $.getScript(), .load())

Oprócz wszechstronnej metody $.ajax(), jQuery oferuje kilka wygodnych metod skrótowych do wykonywania najczęstszych typów zapytań AJAX. Upraszczają one kod, gdy nie potrzebujemy pełnej konfiguracji dostępnej w $.ajax().

Metoda $.get()

Służy do wykonywania zapytań HTTP GET. Jest to skrót dla $.ajax() z method: "GET".

Składnia:

$.get(url, [dane], [funkcjaSuccess], [dataType]);

• url: Adres URL do zapytania.
• dane (opcjonalne): Obiekt lub string z danymi do wysłania jako query string.
• funkcjaSuccess(data, textStatus, xhr) (opcjonalne): Funkcja zwrotna wywoływana po sukcesie.
• dataType (opcjonalne): Oczekiwany typ danych (np. "json", "html", "text").

// Pobierz dane HTML i wstaw do diva
$("#laduj-html").on("click", function() {
  $.get("/fragmenty/naglowek.html", function(htmlData) {
    $("#kontener-naglowka").html(htmlData);
  }, "html");
});

// Pobierz dane JSON z parametrami
$.get("/api/szukaj", { termin: "jQuery", strona: 1 }, function(wyniki) {
  console.log("Znaleziono:", wyniki);
}, "json");

Metoda $.post()

Służy do wykonywania zapytań HTTP POST. Skrót dla $.ajax() z method: "POST".

Składnia:

$.post(url, [dane], [funkcjaSuccess], [dataType]);

Argumenty są takie same jak w $.get(), ale dane są wysyłane w ciele zapytania POST.

// Wyślij dane formularza
$("#formularz-rejestracji").on("submit", function(e) {
  e.preventDefault();
  let dane = $(this).serialize();
  $.post("/api/rejestracja", dane, function(odpowiedz) {
    if (odpowiedz.sukces) {
      alert("Rejestracja udana!");
    } else {
      alert("Błąd: " + odpowiedz.wiadomosc);
    }
  }, "json");
});

Metoda $.getJSON()

Specjalizowany skrót do pobierania danych w formacie JSON za pomocą zapytania GET. Automatycznie ustawia dataType: "json".

Składnia:

$.getJSON(url, [dane], [funkcjaSuccess]);

// Pobierz listę użytkowników
$("#pobierz-uzytkownikow").on("click", function() {
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(users) {
    let lista = "
";
    users.forEach(user => lista += `
${user.name}
`);
    lista += "
";
    $("#lista-uzytkownikow").html(lista);
  });
});

Metoda $.getScript()

Pobiera plik JavaScript z serwera za pomocą zapytania GET, a następnie go wykonuje.

Składnia:

$.getScript(url, [funkcjaSuccess]);

// Załaduj i wykonaj dodatkowy skrypt na żądanie
$("#laduj-walidacje").on("click", function() {
  $.getScript("/js/walidacja-formularza.js", function() {
    console.log("Skrypt walidacji załadowany i wykonany.");
    // Można teraz użyć funkcji z załadowanego skryptu
    if (typeof inicjalizujWalidacje === "function") {
      inicjalizujWalidacje();
    }
  });
});

Metoda .load()

Ta metoda różni się od poprzednich – jest wywoływana na obiekcie jQuery (wyniku selektora) i służy do ładowania fragmentu kodu HTML z serwera i wstawiania go bezpośrednio do wybranych elementów.

Składnia:

$(selektor).load(url, [dane], [funkcjaComplete]);

• url: Adres URL, z którego ma być pobrany HTML. Można dodać selektor po spacji (np. "/strona.html #tresc"), aby załadować tylko określony fragment strony.
• dane (opcjonalne): Obiekt lub string z danymi. Jeśli podane, jQuery wykona zapytanie POST, w przeciwnym razie GET.
• funkcjaComplete(responseText, textStatus, xhr) (opcjonalne): Funkcja zwrotna wywoływana po zakończeniu zapytania i wstawieniu treści.

// Załaduj stopkę strony do diva #stopka
$("#stopka").load("/fragmenty/stopka.html");

// Załaduj tylko listę produktów z innej strony
$("#lista-produktow").load("/produkty/wszystkie.html #produkty-lista ul");

// Załaduj komentarze dla posta o ID 5 (wysyłając ID jako POST)
$("#komentarze-post-5").load("/api/komentarze", { postId: 5 }, function(response, status, xhr) {
  if (status == "error") {
    $(this).html("Błąd ładowania komentarzy: " + xhr.statusText);
  }
});

Ograniczenia Metod Skrótowych

Metody skrótowe nie oferują tak wielu opcji konfiguracji jak $.ajax(). W szczególności, nie mają bezpośredniego odpowiednika dla callbacków beforeSend czy error (chociaż można użyć globalnych handlerów AJAX lub nowszych metod .done(), .fail(), .always() zwracanych przez te metody - patrz kolejna lekcja).

<!DOCTYPE html>
<html>
<head>
    <title>Test Metod Skrótowych AJAX</title>
</head>
<body>
    <h2>Posty Użytkownika 1</h2>
    <button id="pobierz-posty">Pobierz Posty</button>
    <div id="lista-postow" style="margin-top: 10px; border: 1px solid #ccc; padding: 10px; min-height: 50px;">
        <!-- Tutaj pojawią się posty -->
    </div>

    <h2 style="margin-top: 20px;">Zawartość Pliku</h2>
    <button id="zaladuj-plik">Załaduj Plik</button>
    <div id="zawartosc-pliku" style="margin-top: 10px; border: 1px solid #ccc; padding: 10px; min-height: 50px; white-space: pre-wrap;">
        <!-- Tutaj pojawi się zawartość pliku -->
    </div>

    <!-- Plik test.txt w tym samym katalogu -->
    <!-- Zawartość test.txt:
    Linia pierwsza.
    Druga linia tekstu.
    I jeszcze jedna linia.
    -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function() {
            // Obsługa $.getJSON()
            $("#pobierz-posty").on("click", function() {
                $("#lista-postow").html("Ładowanie...");
                $.getJSON("https://jsonplaceholder.typicode.com/posts", { userId: 1 }, function(posts) {
                    let listaHtml = "
";
                    posts.forEach(function(post) {
                        listaHtml += `
${post.title}
`;
                    });
                    listaHtml += "
";
                    $("#lista-postow").html(listaHtml);
                }).fail(function() { // Obsługa błędu dla $.getJSON
                    $("#lista-postow").html("<p style=\'color: red;\'>Błąd pobierania postów.</p>");
                });
            });

            // Obsługa .load()
            $("#zaladuj-plik").on("click", function() {
                // Upewnij się, że plik test.txt istnieje w tym samym katalogu co HTML
                $("#zawartosc-pliku").load("test.txt", function(response, status, xhr) {
                    if (status == "error") {
                        $(this).html("Błąd ładowania pliku: " + xhr.statusText);
                    }
                });
            });
        });
    </script>
</body>
</html>