0Pricing
jQuery Academy · Lekcja

Wysyłanie formularzy AJAX i informacja zwrotna

Proszę opanować asynchroniczne wysyłanie danych formularza za pomocą AJAX, zapewniać użytkownikom informacje zwrotne w czasie rzeczywistym i obsługiwać odpowiedzi serwera bez pełnego przeładowywania strony, aby uzyskać płynniejszą obsługę.

Wysyłanie formularzy AJAX i informacja zwrotna to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Płynne formularze z AJAX

Wyobraź sobie wysyłanie formularza bez przeładowywania całej strony! Na tym polega magia wysyłania formularzy za pomocą AJAX.

Zamiast odświeżać całą stronę, AJAX umożliwia wysyłanie danych formularza do serwera w tle. Zapewnia to znacznie płynniejsze i szybsze doświadczenia użytkownika, idealne w przypadku komentarzy, rejestracji lub szybkich aktualizacji.

Zatrzymywanie domyślnego wysyłania

Pierwszym krokiem podczas wysyłania formularza za pomocą AJAX jest zablokowanie domyślnego działania przeglądarki. Jeśli tego nie zrobimy, strona przeładuje się jak zwykle, niwecząc cel zastosowania AJAX!

Osiągamy to, wywołując event.preventDefault() w procedurze obsługi zdarzenia submit formularza.

<form id="myForm">
  <label for="username">Name:</label>
  <input type="text" id="username" name="username" placeholder="Your name">
  <button type="submit">Submit</button>
</form>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#status').text("Form submission prevented!");
      console.log("Form submission prevented!");
    });
  });
</script>

Przygotowywanie danych formularza

Przed wysłaniem danych formularza za pomocą AJAX należy odpowiednio je zapakować. Doskonale nadaje się do tego metoda .serialize() biblioteki jQuery!

  • Automatycznie zbiera wartości ze wszystkich elementów input, select i textarea znajdujących się w formularzu.
  • Koduje je do ciągu znaków zakodowanego w formacie URL (np. name=Alice&email=alice%40example.com).
  • Ciąg ten jest standardowym formatem wysyłania danych formularza do serwera.
<form id="dataForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" value="Bob">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" value="bob@example.com">
  <button type="submit">Get Data</button>
</form>
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#dataForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      $('#output').text("Serialized: " + formData);
      console.log(formData); // name=Bob&email=bob%40example.com
    });
  });
</script>

Wysyłanie żądania AJAX

Po zserializowaniu danych formularza możemy wysłać je do serwera. jQuery oferuje kilka metod AJAX, ale $.post() jest wygodnym skrótem do wysyłania danych za pomocą metody HTTP POST.

Metoda ta przyjmuje adres URL serwera, zserializowane dane oraz opcjonalną funkcję callback uruchamianą po pomyślnym wykonaniu operacji.

<form id="submitForm">
  <label for="msg">Message:</label>
  <input type="text" id="msg" name="message" value="Hello AJAX!">
  <button type="submit">Send</button>
</form>
<div id="response"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#submitForm').submit(function(event) {
      event.preventDefault();
      let formData = $(this).serialize();
      // Using a dummy API endpoint for demonstration
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#response').text("Success! Server ID: " + data.id);
        console.log("Server response:", data);
      });
    });
  });
</script>

Wyświetlanie informacji o ładowaniu

Gdy użytkownik klika przycisk wysyłania, oczekuje natychmiastowej reakcji. Ponieważ żądania AJAX są asynchroniczne, pojawia się opóźnienie. Zapewnienie wizualnej informacji zwrotnej ma kluczowe znaczenie!

Podczas przetwarzania żądania można wyświetlić komunikat „Loading...” lub wskaźnik ładowania, a następnie ukryć go po nadejściu odpowiedzi.

<style>
  #loading { display: none; color: gray; }
</style>
<form id="feedbackForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="New Widget">
  <button type="submit">Add</button>
</form>
<div id="loading">Loading...</div>
<div id="status"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#feedbackForm').submit(function(event) {
      event.preventDefault();
      $('#loading').show(); // Show loading indicator
      $('#status').text(''); // Clear previous status
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#loading').hide(); // Hide loading
        $('#status').text("Item added with ID: " + data.id);
      });
    });
  });
</script>

Obsługa pomyślnych odpowiedzi

Po pomyślnym przetworzeniu danych formularza serwer zazwyczaj odsyła odpowiedź. Może to być komunikat potwierdzający, identyfikator nowo utworzonego rekordu lub zaktualizowane dane.

Funkcja callback wywoływana po pomyślnym wykonaniu operacji (trzeci argument funkcji $.post()) otrzymuje te dane, dzięki czemu można odpowiednio zaktualizować interfejs użytkownika.

<form id="addTodoForm">
  <label for="todoTitle">Todo:</label>
  <input type="text" id="todoTitle" name="title" placeholder="New todo item">
  <button type="submit">Add Todo</button>
</form>
<ul id="todoList"></ul>
<div id="message"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#addTodoForm').submit(function(event) {
      event.preventDefault();
      $('#message').text('Adding...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/todos", formData, function(todo) {
        $('#message').text('Todo added!');
        $('#todoList').append('<li>' + todo.title + ' (ID: ' + todo.id + ')</li>');
        $('#addTodoForm')[0].reset(); // Clear form fields
      });
    });
  });
</script>

Elegancka obsługa błędów

Nie wszystkie żądania kończą się powodzeniem. Problemy z siecią, błędy serwera lub nieprawidłowe dane mogą spowodować niepowodzenie żądania AJAX. Należy odpowiednio obsługiwać te błędy i informować o nich użytkownika.

W przypadku $.post() można dołączyć metodę .fail(). W przypadku $.ajax() można użyć callbacku error lub metody .fail() na zwróconym obiekcie Deferred.

<form id="errorForm">
  <label for="badData">Data:</label>
  <input type="text" id="badData" name="data" value="bad value">
  <button type="submit">Submit</button>
</form>
<div id="errorMessage" style="color: red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#errorForm').submit(function(event) {
      event.preventDefault();
      $('#errorMessage').text('');
      let formData = $(this).serialize();
      // Simulating an error by posting to a non-existent endpoint
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/nonexistent-endpoint", // Will cause a 404 error
        type: "POST",
        data: formData
      })
      .done(function(data) {
        $('#errorMessage').text("Unexpected success!");
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#errorMessage').text("Error: " + textStatus + " - " + errorThrown);
        console.error("AJAX Error:", textStatus, errorThrown);
      });
    });
  });
</script>

Czyszczenie formularzy po wysłaniu

Po pomyślnym wysłaniu formularza dobrą praktyką z punktu widzenia użytkownika jest wyczyszczenie pól wejściowych. Zapobiega to przypadkowemu ponownemu wysłaniu i przygotowuje formularz do kolejnego działania.

Można użyć natywnej metody DOM .reset() na elemencie formularza albo ręcznie wyczyścić wartości poszczególnych pól.

<form id="clearForm">
  <label for="item">Item:</label>
  <input type="text" id="item" name="item" value="Item A">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" value="1">
  <button type="submit">Add</button>
</form>
<div id="feedbackMsg" style="color: green;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#clearForm').submit(function(event) {
      event.preventDefault();
      $('#feedbackMsg').text('Submitting...');
      let formData = $(this).serialize();
      $.post("https://jsonplaceholder.typicode.com/posts", formData, function(data) {
        $('#feedbackMsg').text('Successfully added! ID: ' + data.id);
        $('#clearForm')[0].reset(); // Clears all form fields
      });
    });
  });
</script>

Kompletny przykład formularza AJAX

Połączmy wszystkie poznane techniki: blokowanie domyślnego wysyłania, serializowanie danych, wysyłanie żądania AJAX, wyświetlanie informacji o ładowaniu, obsługę pomyślnych i nieudanych odpowiedzi, a na końcu czyszczenie formularza.

To kompleksowe podejście zapewnia solidną i przyjazną dla użytkownika obsługę formularzy AJAX.

<style>
  #loader { display: none; color: blue; }
  #result { margin-top: 10px; font-weight: bold; }
</style>
<form id="fullAjaxForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Register</button>
</form>
<div id="loader">Processing...</div>
<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fullAjaxForm').submit(function(event) {
      event.preventDefault(); // Stop default form submission
      $('#loader').show();    // Show loading indicator
      $('#result').text('');  // Clear previous results
      let formData = $(this).serialize(); // Serialize form data
      
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/users", // Dummy API endpoint
        type: "POST",
        data: formData,
        dataType: "json" // Expect JSON response
      })
      .done(function(response) {
        $('#result').css('color', 'green').text('Registration successful! ID: ' + response.id);
        $('#fullAjaxForm')[0].reset(); // Clear form fields
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $('#result').css('color', 'red').text('Registration failed: ' + textStatus);
        console.error("AJAX Error:", textStatus, errorThrown);
      })
      .always(function() {
        $('#loader').hide(); // Always hide loading indicator
      });
    });
  });
</script>

Sprawdź swoją wiedzę

Nauczyli się Państwo wysyłać formularze za pomocą AJAX, zapewniając informacje zwrotne w czasie rzeczywistym. Sprawdźmy Państwa wiedzę!

Podsumowanie: płynne wysyłanie formularzy

Gratulacje! Opanowali Państwo wysyłanie formularzy za pomocą AJAX, wzbogacając aplikacje internetowe o płynne działanie bez zakłócania pracy użytkownika.

  • Nauczyli się Państwo blokować domyślne działanie formularza za pomocą event.preventDefault().
  • Wykorzystali Państwo .serialize() do łatwego przygotowywania danych formularza do przesłania.
  • Zaimplementowali Państwo $.post() lub $.ajax() do asynchronicznego wysyłania danych.
  • Dodali Państwo istotne informacje zwrotne w czasie rzeczywistym dotyczące ładowania, powodzenia i błędów.
  • Na koniec nauczyli się Państwo czyścić formularze po wysłaniu, aby zapewnić przejrzysty interfejs użytkownika.

Te umiejętności są niezbędne do tworzenia nowoczesnych i responsywnych formularzy internetowych!

Często zadawane pytania

Czy lekcja „Wysyłanie formularzy AJAX i informacja zwrotna” jest bezpłatna?

Tak — pełny tekst „Wysyłanie formularzy AJAX i informacja zwrotna” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Wysyłanie formularzy AJAX i informacja zwrotna”?

Proszę opanować asynchroniczne wysyłanie danych formularza za pomocą AJAX, zapewniać użytkownikom informacje zwrotne w czasie rzeczywistym i obsługiwać odpowiedzi serwera bez pełnego przeładowywania… Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.

Ile czasu zajmuje lekcja „Wysyłanie formularzy AJAX i informacja zwrotna”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dynamiczne modyfikowanie pól formularza
  2. Logika walidacji formularzy po stronie klienta
  3. Wysyłanie formularzy AJAX i informacja zwrotna
← Powrót do jQuery Academy