Wir haben mit dem Tutorial begonnen, Formulare über Ajax zu erstellen und zu senden. Wenn wir Seiten in HTML erstellen, ist es sehr einfach , Formulare für die Dateneingabe zu erstellen, entweder um als Kontaktformular mit der Seite oder der Organisation zu dienen. eine Umfrage durchführen, wie Registrierung, etc. Normalerweise verwenden wir die PHP-Post-Methode, um die Informationen zu senden und sie zu visualisieren, zu bearbeiten oder zu ändern, wenn wir dieses Formular für etwas Einfaches verwenden möchten.
Die Verwendung dieser Methode in PHP hat jedoch den großen Nachteil, dass wir beim Eingeben von Daten die betreffende Seite aktualisieren oder neu laden müssen. Aus diesem Grund werden wir eine Methode sehen, bei der es keinen Bedarf gibt.
Ich meine ein mit Ajax erstelltes Formular, das ebenfalls mit PHP geholfen und für eine Seite in HTML erstellt wurde. Natürlich müssen wir unsere Seite in HTML erstellen, unserem Index, den wir mithilfe einer CSS-Datei anpassen oder mit Stilen versehen können.
Nach dem Erstellen dieser Basis müssen wir zwei weitere Dateien erstellen, eine PHP-Datei, in der wir die Dateneingabe über das Formular und ein in Javascript implementiertes Skript, dh eine .js-Datei, bearbeiten. In diesem Skript verwenden wir Ajax, um die Daten so zu verarbeiten, dass wir unsere Webseite nicht neu laden müssen, wie es der Fall wäre, wenn wir nur eine PHP-Methode wie Post oder get verwenden würden.
Zusätzlich müssen wir eine jQuery-Bibliothek einbinden , um interpretieren zu können, was wir mit Ajax schreiben.
Zu Beginn ist es wichtig, sich daran zu erinnern, dass alle von uns erstellten Dateien, unsere Ajax-Javascript-Datei, die wir running.js nennen, die CSS-Stylesheet-Datei, die wir styles.css nennen, wenn wir eine erstellen, und die Bibliothek von jQuery müssen wir am Anfang unseres HTML-Codes einfügen.
Es ist so einfach, sie in den Kopf unserer index.html aufzunehmen:
<! DOCTYPE html> <html lang = de> <head> <meta charset = utf-8 /> <! - Hier importieren wir die Dateien: Style Sheet, JQuery Library und unser Script-> <link rel = "stylesheet" type = "text / css" href = "styles.css"> <script type = "text / javascript" src = "http://code.jquery.com/jquery-1.10.2.min.js"> </ script> <script type = "text / javascript" src = "running.js"> </ script> </ head> <body> <! - Hier müssen wir die Struktur erstellen, in der sich das Formular befindet-> ... </ body>
Jetzt erstellen wir eine Datei mit einfachem PHP-Code, die wir envio.php aufrufen und in der wir die Informationen sammeln, die über unsere Website gesendet werden. In diesem Fall handelt es sich bei den Informationen um ein Kontaktformular, sodass die Daten an eine E-Mail-Adresse gesendet werden, um die von den Benutzern hinterlassenen Nachrichten zu lesen. Dies kann jedoch geändert und an eine andere Seite oder Stelle gesendet werden.
<? php $ name = $ _POST ['name']; $ email = $ _POST ['email']; $ message = $ _POST ['message']; $ destination = '[email protected]'; $ of = 'From:'. $ email; $ messageMail = "Name: $ name n E-Mail: $ email n Nachricht: n $ message"; if ($ _POST ['submit']) { if (mail ($ destination, $ title, $ message, mail, $ of)) { echo "<script language = 'javascript'> alert ('Nachricht gesendet, vielen Dank.'); window.location.href = 'http://TUWEB.COM'; </ script> "; } sonst { Echo 'Versand fehlgeschlagen'; } } ?>
Nachdem wir den PHP-Code erstellt haben, gehen wir zu der wirklich interessanten Sache, nämlich der Erstellung unserer Datei funciona.js, in der wir Ajax verwenden werden. Auf diese Weise werden wir die Daten für unser Kontaktformular verarbeiten, ohne die Seite wie zuvor erwähnt zu aktualisieren. Zuerst zeigen wir den Code, den wir in unser Skript schreiben müssen:
Funktion envioMail () { $ ("# car_enviar"). 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"; } sonst { $ ('# c_mail'). after ("<span class = 'car_error' id = 'car_error_mail'> Geben Sie eine gültige E-Mail-Adresse ein. </ span>"); sendMail = "false"; } if (s_name.length == 0) { $ ('# c_name'). after ("<span class = 'car_error' id = 'car_error_name'> Geben Sie Ihren Namen ein. </ span>"); var sendMail = "false"; } if (s_msj.length == 0) { $ ('# c_msg'). after ("<span class = 'car_error' id = 'car_error_msg'> Nachricht eingeben. </ span>"); var sendMail = "false"; } if (sendMail == "true") { var datos = { "name": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "message": $ ('# c_msg'). val () }; $ .ajax ({ Daten: Daten, url: 'envio.php', Typ: "Post", beforeSend: function () { $ ("# car_enviar"). val ("Sending ..."); }, Erfolg: Funktion (Antwort) { $ ('form') [0] .reset (); $ ("# car_enviar"). val ("Send"); $ ("# c_information p"). html (Antwort); $ ("# c_information"). fadeIn ('slow'); $ ("# car_enviar"). removeAttr ("disabled"); } }); } sonst { $ ("# car_enviar"). removeAttr ("disabled"); } }
Wir erstellen die Filtervariable, um zu überprüfen, ob die von uns eingegebene E-Mail-Adresse gültig ist. Dazu geben wir eine Zeichenfolge gefolgt von einem at-Symbol, einer weiteren Zeichenfolge, einem Punkt und weiteren Zeichen ein. Wenn es diese Struktur beim Senden der Nachricht nicht hat, wird uns mitgeteilt, dass es nicht gesendet werden kann, da die eingegebene E-Mail nicht gültig ist. Wenn Sie die in der Variablen send email sendMail gespeicherten Anforderungen erfüllen, geben Sie den Wert true ein und fahren Sie mit der Überprüfung fort.
Überprüfen Sie dann die Namenslänge. Wenn es gleich 0 ist, bedeutet dies, dass wir keinen Namen eingegeben haben, und fordert uns auf, ihn erneut einzugeben.
Das Gleiche gilt für die Nachricht und ihre Länge, um sicherzustellen, dass das Feld nicht leer ist.
Nachdem Sie alle Felder überprüft und auf ihre Richtigkeit überprüft haben, speichern Sie in den variablen Daten, die ein Array darstellen, den Namen, die E-Mail-Adresse und die zu sendende Nachricht.
Schließlich übergeben wir mit Ajax die Daten und verweisen mit der post-Methode auf die Datei envio.php und senden die Informationen. Die Meldung “Senden” wird angezeigt, bis der Vorgang erfolgreich abgeschlossen wurde, bevor er gesendet wird.
