0Pricing
jQuery Academy · Lektion

AJAX-Formularübermittlung und Feedback

Beherrschen Sie das asynchrone Übermitteln von Formulardaten per AJAX, geben Sie Echtzeit-Feedback und verarbeiten Sie Serverantworten ohne vollständiges Neuladen der Seite für eine angenehmere Benutzererfahrung.

AJAX-Formularübermittlung und Feedback ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Reibungslose Formulare mit AJAX

Stellen Sie sich vor, ein Formular abzusenden, ohne die gesamte Seite neu zu laden! Das ist die Magie des Absendevorgangs per AJAX.

Statt die gesamte Seite zu aktualisieren, können Sie mit AJAX Formulardaten im Hintergrund an einen Server senden. Das sorgt für eine deutlich reibungslosere und schnellere Benutzererfahrung – ideal für Kommentare, Registrierungen oder schnelle Aktualisierungen.

Das standardmäßige Absenden verhindern

Der erste Schritt beim Absenden eines Formulars per AJAX besteht darin, das Standardverhalten des Browsers zu verhindern. Andernfalls wird die Seite wie gewohnt neu geladen, wodurch der Zweck von AJAX verfehlt wird!

Dazu rufen wir event.preventDefault() im submit-Handler unseres Formulars auf.

<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>

Formulardaten vorbereiten

Bevor wir Formulardaten per AJAX senden, müssen wir sie korrekt zusammenstellen. Dafür eignet sich jQuerys Methode .serialize() hervorragend!

  • Sie sammelt automatisch die Werte aller input-, select- und textarea-Elemente innerhalb des Formulars.
  • Sie codiert sie als URL-codierten String (z. B. name=Alice&email=alice%40example.com).
  • Dieser String ist das Standardformat zum Senden von Formulardaten an einen Server.
<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>

Die AJAX-Anfrage senden

Nachdem die Formulardaten serialisiert wurden, können wir sie nun an den Server senden. jQuery bietet mehrere AJAX-Methoden. $.post() ist jedoch eine praktische Abkürzung zum Senden von Daten mit der HTTP-POST-Methode.

Die Methode übernimmt die Server-URL, die serialisierten Daten und optional eine Callback-Funktion, die bei Erfolg ausgeführt wird.

<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>

Ladefeedback anzeigen

Wenn ein Benutzer auf „Senden“ klickt, erwartet er eine sofortige Reaktion. Da AJAX-Anfragen asynchron sind, entsteht eine Verzögerung. Visuelles Feedback ist daher entscheidend!

Während die Anfrage verarbeitet wird, können Sie eine Meldung wie „Wird geladen ...“ oder einen Spinner anzeigen und ihn ausblenden, sobald die Antwort eintrifft.

<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>

Erfolgsantworten verarbeiten

Sobald der Server die Formulardaten erfolgreich verarbeitet hat, sendet er normalerweise eine Antwort zurück. Das kann eine Bestätigungsmeldung, die ID eines neu erstellten Datensatzes oder aktualisierte Daten sein.

Die Erfolgs-Callback-Funktion (das dritte Argument von $.post()) erhält diese Daten, sodass Sie Ihre Benutzeroberfläche entsprechend aktualisieren können.

<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>

Fehler elegant behandeln

Nicht jede Anfrage ist erfolgreich. Netzwerkprobleme, Serverfehler oder ungültige Daten können dazu führen, dass eine AJAX-Anfrage fehlschlägt. Es ist wichtig, solche Fehler angemessen zu behandeln und den Benutzer zu informieren.

Bei $.post() können Sie eine .fail()-Methode verketten. Bei $.ajax() können Sie den error-Callback oder die .fail()-Methode des zurückgegebenen Deferred-Objekts verwenden.

<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>

Formulare nach dem Absenden leeren

Nach dem erfolgreichen Absenden eines Formulars ist es eine gute Benutzererfahrung, die Eingabefelder zu leeren. So verhindern Sie versehentliche erneute Übermittlungen und schaffen eine leere Ausgangsbasis für die nächste Aktion.

Sie können die native DOM-Methode .reset() für das Formularelement verwenden oder einzelne Eingabewerte manuell leeren.

<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>

Vollständiges AJAX-Formularbeispiel

Kombinieren wir alle erlernten Techniken: das Verhindern des standardmäßigen Absendevorgangs, das Serialisieren der Daten, das Senden der AJAX-Anfrage, das Anzeigen eines Ladefeedbacks, das Behandeln erfolgreicher und fehlgeschlagener Antworten und schließlich das Leeren des Formulars.

Dieser umfassende Ansatz sorgt für eine robuste und benutzerfreundliche Arbeit mit AJAX-Formularen.

<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>

Verständnis überprüfen

Sie haben gelernt, Formulare mit AJAX abzusenden und dabei Echtzeit-Feedback bereitzustellen. Testen wir Ihr Wissen!

Zusammenfassung: Reibungslose Formularübermittlung

Herzlichen Glückwunsch! Sie beherrschen nun das Absenden von Formularen per AJAX und können Ihre Webanwendungen mit reibungslosen, nicht unterbrechenden Benutzererfahrungen verbessern.

  • Sie haben gelernt, das Standardverhalten von Formularen mit event.preventDefault() zu verhindern.
  • Sie haben .serialize() verwendet, um Formulardaten einfach für die Übertragung vorzubereiten.
  • Sie haben $.post() oder $.ajax() implementiert, um Daten asynchron zu senden.
  • Sie haben wichtiges Echtzeit-Feedback für Lade-, Erfolgs- und Fehlerzustände hinzugefügt.
  • Schließlich haben Sie gelernt, Formulare nach dem Absenden zu leeren, um eine übersichtliche Benutzeroberfläche zu erhalten.

Diese Kenntnisse sind unverzichtbar für moderne, reaktionsfähige Webformulare!

Häufig gestellte Fragen

Ist die Lektion „AJAX-Formularübermittlung und Feedback“ kostenlos?

Ja — der vollständige Text von „AJAX-Formularübermittlung und Feedback“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „AJAX-Formularübermittlung und Feedback“?

Beherrschen Sie das asynchrone Übermitteln von Formulardaten per AJAX, geben Sie Echtzeit-Feedback und verarbeiten Sie Serverantworten ohne vollständiges Neuladen der Seite für eine angenehmere Benut… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „AJAX-Formularübermittlung und Feedback“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Dynamische Bearbeitung von Formularfeldern
  2. Logik der clientseitigen Formularvalidierung
  3. AJAX-Formularübermittlung und Feedback
← Zurück zu jQuery Academy