Wir haben das Tutorial gestartet, um die Erstellen und Senden von Formularen über Ajax, dafür ist es sehr einfach, wenn wir Seiten in HTML erstellen Formulare machen Dateneingabe, entweder um uns als Kontakt Formular mit der Seite oder Organisation selbst, um eine Umfrage durchzuführen, wie z.B. eine Registrierung usw. Normalerweise verwenden wir, wenn wir dieses Formular für etwas Einfaches gestalten möchten, die PHP-Post-Methode, um die Informationen zu senden und sie anzuzeigen, zu verarbeiten oder zu ändern.
Die Verwendung dieser Methode in PHP hat jedoch den großen Nachteil, dass wir bei der Eingabe von Daten die fragliche Seite aktualisieren oder neu laden müssen. Deshalb werden wir eine Methode sehen, bei der es nicht nötig ist.
Ich meine ein Formular, das mit Ajax erstellt wurde, auch mit PHP geholfen und für eine Seite in HTML erstellt wurde. Natürlich müssen wir unsere Seite in HTML erstellen, unseren Index, den wir dank einer CSS-Datei mit Stilen anpassen oder personalisieren können.
Nachdem wir diese Basis erstellt haben, müssen wir weitere 2 Dateien erstellen, eine PHP-Datei, in der wir die Dateneingabe durch das Formular bearbeiten, und ein in Javascript implementiertes Skript, dh eine .js-Datei. In diesem Skript verwenden wir Ajax, um die Daten so zu verarbeiten, dass wir unsere Webseite nicht neu laden müssen, wie dies der Fall wäre, wenn wir nur eine PHP-Methode wie Post oder get verwenden würden.
Abgesehen davon wir müssen eine jQuery-Bibliothek einbinden um interpretieren zu können, was wir mit Ajax schreiben.
Zunächst ist es wichtig, sich daran zu erinnern, dass alle Dateien, die wir erstellen, unsere Ajax-Javascript-Datei, die wir operation.js nennen, die CSS-Stylesheet-Datei, die wir style.css nennen, wenn wir eine erstellen wollen, und die Bibliothek von jQuery müssen wir sie am Anfang unseres HTML-Codes einfügen.
Es ist so einfach wie füge sie in den Kopf ein aus unserer index.html:
…Jetzt erstellen wir eine Datei mit einfachem PHP-Code, die wir envio.php nennen, in der wir die Informationen sammeln, die über unsere Webseite gesendet werden. In diesem Fall werden die Informationen für ein Kontaktformular verwendet, damit die Daten an unsere eigene E-Mail-Adresse gesendet werden, um die von Benutzern hinterlassenen Nachrichten lesen zu können, obwohl dies geändert und an eine andere Seite oder einen anderen Ort gesendet werden kann.
Nachdem wir den PHP-Code erstellt haben, gehen wir zu der wirklich interessanten Sache über, die die Erstellung unserer Datei operation.js ist, in der wir Ajax verwenden. Auf diese Weise verarbeiten wir die Daten für unser Kontaktformular, ohne die Seite wie zuvor angegeben zu aktualisieren. Zuerst zeigen wir den Code, den wir in unser Skript schreiben müssen:
Funktion sendMail() {$ ("# car_send"). attr ("disabled", true); $ (". car_error"). remove(); var-Filter = / [A-Za-z] [A-Za-z0-9 _] * @ [A-Za-z0-9 _] +. [A-Za-z0-9 _.] + [A -za- z] $ /; var s_email = $ ('# c_mail').val(); var s_name = $ ('# c_name').val(); var s_msj = $ ('# c_msg').val(); if (filter.test (s_email)) {sendMail = "true"; } else {$ (‘# c_mail’).after ("Geben Sie eine gültige E-Mail-Adresse ein."); sendMail = "false"; } if (s_name.length == 0) {$ (‘# c_name’) after ("Bitte geben Sie Ihren Namen ein."); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg’) after ("Nachricht eingeben."); var sendMail = "false"; } if (sendMail == "true") {var data = {"name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message" : $ ('# c_msg').val()}; $ .ajax ({data: data, url: 'sending.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sending …");}, success : function (Antwort) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Senden"); $ ("# c_information p"). html (Antwort); $ (" #c_information "). fadeIn ('slow'); $ (" # car_enviar "). removeAttr ("disabled");}}); } else {$ ("# car_submit"). removeAttr ("deaktiviert"); }} Wir erstellen die Filtervariable, um zu überprüfen, ob die von uns eingefügte E-Mail gültig ist. Dazu geben wir an, dass die eingegebene Adresse eine Zeichenfolge ist, gefolgt von einem at-Symbol, einer anderen Zeichenfolge, einem Punkt und weiteren Zeichen. Wenn sie beim Senden der Nachricht nicht über diese Struktur verfügt, wird uns mitgeteilt, dass sie nicht gesendet werden kann, da die eingegebene E-Mail-Adresse ungültig ist. Wenn es die Anforderungen erfüllt, speichern Sie den Wert true in der Sende-E-Mail-Variable sendMail und fahren Sie mit der Prüfung fort.
Bestätigen Sie dann die Länge des Namens. Wenn es gleich 0 ist, bedeutet dies, dass wir keinen Namen eingegeben haben, und fordert uns auf, ihn erneut einzugeben.
Dasselbe macht es mit der Nachricht und ihrer Länge, um zu überprüfen, ob wir das Feld nicht leer gelassen haben.
Nachdem Sie alle Felder überprüft und deren Richtigkeit überprüft haben, speichern Sie in der Datenvariablen, die ein Array ist, den Namen, die E-Mail und die zu sendende Nachricht.
Schließlich übergeben wir mit Ajax die Daten und tun Verweis auf die Datei envio.php mit der post-Methode und wir senden die Informationen. Vor dem Senden erscheint die Nachricht "senden" bis der Vorgang erfolgreich abgeschlossen ist.
Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
