So senden Sie AJAX-Formulare mit jQuery
Einführung
jQuery kann zur Validierung mit der Formularübermittlung gekoppelt werden. Dies hat den Vorteil, dass Benutzer Feedback zu Fehlern in ihren Eingaben erhalten.
In diesem Tutorial erhalten Sie ein Beispielformular, das mit einem PHP-Backend kommuniziert. Das Formular verwendet jQuery, um ein Formular ohne Seitenaktualisierung (mit AJAX) zu verarbeiten, Fehler anzuzeigen und eine Erfolgsmeldung anzuzeigen.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
- In diesem Tutorial wird davon ausgegangen, dass Sie PHP lokal installiert haben und den integrierten Webserver ausführen können. Möglicherweise können Sie eines unserer Tutorials zur Installation von PHP in Ihrer Umgebung konsultieren.
- Einige Vertrautheit mit Selektoren und Methoden aus der jQuery-Bibliothek.
- Einige Vertrautheit mit Klassen aus der Bootstrap-Bibliothek.
- Ein Code-Editor.
- Ein moderner Webbrowser.
Hinweis: In diesem Lernprogramm werden nicht die neuesten Versionen von jQuery (derzeit 3.5.1) oder Bootstrap (derzeit 5.0.0-beta1) angegeben. Viele der Lektionen in diesem Tutorial beziehen sich jedoch immer noch auf die neuesten Versionen.
Dieses Tutorial wurde mit PHP v7.3.24, jQuery v2.0.3 und Bootstrap v3.0.3 überprüft.
Schritt 1 – Erstellen des Backends mit PHP
Für die Zwecke dieses Tutorials wird das Backend in PHP geschrieben.
Öffnen Sie zunächst ein Terminalfenster und erstellen Sie ein neues Projektverzeichnis:
- mkdir jquery-form-validation
Navigieren Sie zu diesem neuen Projektverzeichnis:
- cd jquery-form-validation
Verwenden Sie dann Ihren Code-Editor, um eine neue process.php -Datei zu erstellen:
<?php$errors = ;$data = ;if (empty($_POST)) { $errors = 'Name is required.';}if (empty($_POST)) { $errors = 'Email is required.';}if (empty($_POST)) { $errors = 'Superhero alias is required.';}if (!empty($errors)) { $data = false; $data = $errors;} else { $data = true; $data = 'Success!';}echo json_encode($data);Diese Datei nimmt Werte für name, email und superheroAlias an. Wenn einer dieser Werte nicht angegeben wird, wird eine Fehlermeldung zurückgesendet. Viele andere Validierungen könnten an dieser Stelle durchgeführt werden, aber für die Zwecke dieses Tutorials werden Sie nur sicherstellen, dass diese erforderlichen Eingaben bereitgestellt wurden. Andernfalls wird eine Erfolgsmeldung zurückgesendet, wenn ein Wert für name, email und superheroAlias vorhanden ist.
Hinweis: In einem realen Szenario wäre das Backend auch für andere Aufgaben verantwortlich, z. B. das Übernehmen der Daten und das Speichern von Änderungen in einer Datenbank, das Erstellen einer Sitzung oder das Senden einer E-Mail.
Nachdem Sie die Formularverarbeitung abgeschlossen haben, können Sie das Formular erstellen.
Schritt 2 – Erstellen des Frontends mit HTML und CSS
Für die Zwecke dieses Tutorials wird Bootstrap verwendet, um die Ansichten zu erstellen.
Verwenden Sie in Ihrem Projektverzeichnis Ihren Codeeditor, um eine index.html -Datei zu erstellen:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script></head> <body> <div class="col-sm-6 col-sm-offset-3"> <h1>Processing an AJAX Form</h1> <form action="process.php" method="POST"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" placeholder="Full Name" /> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" placeholder="[email protected]" /> </div> <div class="form-group"> <label for="superheroAlias">Superhero Alias</label> <input type="text" class="form-control" name="superheroAlias" placeholder="Ant Man, Wonder Woman, Black Panther, Superman, Black Widow" /> </div> <button type="submit" class="btn btn-success"> Submit </button> </form> </div> </body></html>Die CDN-Version (Content Delivery Network) von Bootstrap und jQuery wird referenziert. Das Formular action wird auf die PHP-Datei gesetzt, die zuvor erstellt wurde. Das Formular besteht aus Feldern für name, email und superheroAlias. Das Formular benötigt auch eine Senden-Schaltfläche.
Öffnen Sie ein Terminalfenster und navigieren Sie zum Projektverzeichnis. Und führen Sie den PHP-Server aus:
- php -S localhost:8000
Besuchen Sie localhost:8000 in Ihrem Webbrowser und beachten Sie Folgendes:
Nachdem Sie das Formular ausgefüllt haben, können Sie das Skript für die Formularübermittlung erstellen.
Schritt 3 – Handhabung der Formular-Übermittlungslogik in JavaScript und jQuery
Um ein Formular über AJAX zu senden, muss Ihr Skript vier Aufgaben ausführen:
- Erfassen Sie die Schaltfläche zum Senden des Formulars, damit die Standardaktion nicht ausgeführt wird.
- Holen Sie sich alle Daten aus dem Formular mit jQuery.
- Senden Sie die Formulardaten mit AJAX.
- Anzeigefehler, falls vorhanden.
Erstellen Sie in Ihrem Projektverzeichnis mit Ihrem Codeeditor eine neue form.js -Datei:
$(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); });});Dieser Code ruft die Daten aus den Feldern name, email und superheroAlias ab. Anschließend wird eine AJAX-Anforderung an process.php mit einer Nutzlast von Formulardaten ausgeführt. Nach einer erfolgreichen Verbindung protokolliert die Konsole die Antwortdaten. event.preventDefault() wird verwendet, um zu verhindern, dass sich das Formular standardmäßig verhält, indem die Seite beim Senden neu geladen wird.
Nachdem Sie Ihre Änderungen in form.js gespeichert haben, besuchen Sie die index.html -Datei erneut mit Ihrem Codeeditor. Fügen Sie einen Verweis auf die neue JavaScript-Datei hinzu:
<!DOCTYPE html><html> <head> <title>jQuery Form Example</title> <!-- ... --> <script src="form.js"></script></head><!-- ... -->Wenn ein Benutzer nun die Senden-Schaltfläche im Formular drückt, ruft der JavaScript-Code alle Eingabewerte ab und sendet eine POST-Anfrage an process.php.
Hinweis: Sie verwenden den Rückruf .done , um eine erfolgreiche AJAX-Anforderung zu verarbeiten. Früher hieß dies .success , aber das ist seitdem in jQuery 1.8+ veraltet.
Eine andere Alternative besteht darin, serialize zu verwenden, anstatt die Formularinformationen einzeln abzurufen.
Das PHP-Skript verarbeitet die vom AJAX-Aufruf gesendeten Eingaben und gibt das erstellte Array $data zurück. Sie können dies in der Konsole Ihres Browsers beobachten, nachdem Sie Ihr Formular gesendet haben:
Nachdem Sie die Formularlogik abgeschlossen haben, können Sie das Skript zur Behandlung von Formularfehlern erstellen.
Schritt 4 – Anzeigen von Formularvalidierungsfehlern
Im PHP-Skript überprüft der Code, ob alle Felder erforderlich sind. Wenn kein Feld vorhanden ist, wird ein Fehler zurückgesendet.
Wiederholen Sie form.js und fügen Sie die folgenden hervorgehobenen Codezeilen hinzu:
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '<div class="help-block">' + data.errors.name + "</div>" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '<div class="help-block">' + data.errors.email + "</div>" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '<div class="help-block">' + data.errors.superheroAlias + "</div>" ); } } else { $("form").html( '<div class="alert alert-success">' + data.message + "</div>" ); } }); event.preventDefault(); });// ...Dieser Code überprüft, ob die Antwort für jedes Feld einen Fehler enthält. Wenn ein Fehler vorliegt, wird eine has-error -Klasse hinzugefügt und die Fehlermeldung angehängt.
Überprüfen Sie nun Ihr Formular in einem Webbrowser und experimentieren Sie mit dem Senden von Daten mit dem Formular.
Wenn es irgendwelche Fehler gibt, die vom Server zurückkommen, wird das Formular Feedback zu allen erforderlichen Feldern geben:
Und wenn keine Fehler vom Server zurückgegeben werden, gibt das Formular Feedback für eine erfolgreiche Übermittlung:
Jedes Mal, wenn wir das Formular absenden, sind unsere Fehler aus unserer vorherigen Einreichung immer noch vorhanden. Sie müssen sie löschen, indem Sie sie entfernen, sobald das Formular erneut gesendet wird.
Wiederholen Sie form.js und fügen Sie die folgenden hervorgehobenen Codezeilen hinzu:
// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... });// ...Dieser Code entfernt die has-error -Klasse aus allen .form-group -Elementen. Es werden auch alle .help-block Elemente mit Fehlermeldungen entfernt.
Schritt 5 – Anzeigen von Serververbindungsfehlern
Wenn beim Herstellen einer Verbindung zum Server ein Fehler auftritt, erfolgt keine JSON-Antwort vom AJAX-Aufruf. Um zu verhindern, dass Benutzer auf eine Antwort warten, die niemals eintrifft, können Sie eine Fehlermeldung für Verbindungsfehler bereitstellen.
Wiederholen Sie form.js und fügen Sie die folgenden hervorgehobenen Codezeilen hinzu:
// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '<div class="alert alert-danger">Could not reach server, please try again later.</div>' ); });// ...Wenn der Server aus irgendeinem Grund ausfällt oder ausfällt, erhält ein Benutzer, der versucht, ein Formular zu senden, eine Fehlermeldung:
Nachdem Sie die Serverfehlermeldung abgeschlossen haben, haben Sie das Beispielformular ausgefüllt.
Mit $.post statt $.ajax
jQuery bietet auch eine $.post -Kurzschriftmethode als Alternative zu $.ajax .
Der $.ajax -Code in form.js könnte mit $.post umgeschrieben werden:
$.post('process.php', function(formData) { // place success code here}) .fail(function(data) { // place error code here });Der Vorteil von $.post besteht darin, dass nicht so viel Verbindungskonfiguration deklariert werden muss.
Fazit
In diesem Artikel haben Sie ein Beispielformular erstellt, das mit jQuery mit einem PHP-Backend kommuniziert und Fehler im Formular anzeigt.
Als nächsten Schritt möchten Sie komplexere Validierungen wie gültige E-Mail-Adressen und Daten untersuchen. Möglicherweise möchten Sie auch clientseitige Validierungen anwenden, die im Browser funktionieren.
Wenn Sie mehr über JavaScript erfahren möchten, besuchen Sie unsere JavaScript-Themenseite für Übungen und Programmierprojekte.