Verwendung von AJAX zum Senden eines Webformulars

Werbung

Sie haben vielleicht unsere gelesen jQuery-Leitfaden Ein grundlegendes Handbuch zu JQuery für Javascript-ProgrammiererWenn Sie ein Javascript-Programmierer sind, hilft Ihnen diese Anleitung zu JQuery dabei, wie ein Ninja zu programmieren. Weiterlesen sowie Teil fünf unserer jQuery-Tutorial zu AJAX jQuery Tutorial (Teil 5): AJAX Them All!Gegen Ende unserer jQuery-Mini-Tutorial-Reihe ist es an der Zeit, uns eine der am häufigsten verwendeten Funktionen von jQuery genauer anzusehen. Mit AJAX kann eine Website mit ... Weiterlesen , aber heute zeige ich Ihnen, wie Sie mit AJAX dynamisch ein Webformular senden. JQuery ist bei weitem der einfachste Weg, AJAX zu verwenden Erste Schritte Tutorial jQuery Tutorial - Erste Schritte: Grundlagen und SelektorenLetzte Woche habe ich darüber gesprochen, wie wichtig jQuery für jeden modernen Webentwickler ist und warum es großartig ist. Diese Woche, denke ich, ist es Zeit, dass wir uns mit etwas Code die Hände schmutzig machen und lernen, wie ... Weiterlesen wenn Sie ein Anfänger sind. Lass uns gleich einsteigen.

Warum AJAX verwenden?

Sie fragen sich vielleicht: "Warum brauche ich AJAX?" HTML ist perfekt in der Lage, Formulare einzureichen, und dies auf ziemlich schmerzlose Weise. AJAX ist in den meisten Webseiten implementiert und erfreut sich immer größerer Beliebtheit.

Der enorme Vorteil, den AJAX bringt, ist die Fähigkeit dazu teilweise laden Teile von Webseiten. Dadurch werden Seiten schneller und reaktionsschneller angezeigt und Bandbreite gespart, da nur ein kleiner Teil der Daten anstelle der gesamten Seite neu geladen werden muss. Hier sind einige grundlegende AJAX-Anwendungsfälle:

• Suchen Sie regelmäßig nach neuen E-Mails.
• Aktualisieren Sie alle 30 Sekunden ein Live-Fußballergebnis.
• Aktualisieren Sie den Preis für eine Online-Auktion.

AJAX bietet Ihnen als Entwickler eine nahezu unbegrenzte Möglichkeit, Webseiten schnell, reaktionsschnell und bissig zu gestalten - etwas, wofür sich Ihre Besucher bedanken werden.

Der HTML

Bevor Sie beginnen, benötigen Sie ein HTML-Formular. Wenn Sie nicht wissen, was HTML ist, lesen Sie unseren Leitfaden unter wie man eine Website für Anfänger erstellt So erstellen Sie eine Website: Für AnfängerHeute werde ich Sie durch den Prozess der Erstellung einer vollständigen Website von Grund auf führen. Mach dir keine Sorgen, wenn das schwierig klingt. Ich werde Sie bei jedem Schritt durch den Weg führen. Weiterlesen .

Hier ist der HTML-Code, den Sie benötigen:

 Name: Alter: 

Dieses HTML definiert ein Formular mit einigen Elementen. Beachten Sie, wie es gibt Aktion und Methode Attribute. Diese definieren, wo und wie das Formular gesendet wird. Sie werden nicht benötigt, wenn Sie AJAX verwenden. Es ist jedoch eine gute Idee, sie zu verwenden, da dadurch sichergestellt wird, dass Besucher Ihrer Website sie weiterhin verwenden können, wenn JavaScript deaktiviert ist. Diese Seite enthält jQuery, das von Google auf ihrer Website gehostet wird CDN Was CDNs sind und warum Speicher kein Problem mehr istCDNs machen das Internet schnell und Websites erschwinglich, selbst wenn Sie auf Millionen von Benutzern skalieren. Erstens kostet Bandbreite Geld; diejenigen von uns mit begrenzten Verträgen wissen das nur zu gut. Nicht nur du ... Weiterlesen . Das Kopf enthält ein Skript Tag - Hier schreiben Sie Ihren Code.

Dieses Formular sieht momentan vielleicht etwas langweilig aus, daher sollten Sie es in Betracht ziehen CSS lernen 5 kleine Schritte zum Erlernen von CSS und zum Kick-Ass-CSS-ZaubererCSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt erlebt haben, und es hat den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Weise definiert XHTML die semantische Struktur ... Weiterlesen um es ein bisschen zu beleben.

Das JavaScript

Es gibt verschiedene Möglichkeiten, Formulare mit JavaScript einzureichen. Der erste und einfachste Weg, dies zu tun, ist durch die einreichen Methode:

document.getElementById ('myForm'). submit ();

Sie können das Formular natürlich mit jQuery ausrichten, wenn Sie dies bevorzugen - es macht keinen Unterschied:

$ ('# myForm'). submit ();

Dieser Befehl weist Ihren Browser an, das Formular zu senden, genau wie das Drücken der Schaltfläche "Senden". Es zielt auf das Formular anhand seiner ID ab. In diesem Fall ist dies der Fall myForm. Dies ist kein AJAX, daher wird die gesamte Seite neu geladen - was nicht immer wünschenswert ist.

In dem Methode Attribut Ihres Formulars haben Sie angegeben, wie das Formular gesendet werden soll. Das kann sein POST oder ERHALTEN. Dieses Attribut wird beim Senden von Formularen mit AJAX nicht verwendet, es kann jedoch dieselbe Methode verwendet werden.

Ein Großteil des modernen Webs wird über GET- oder POST-Anforderungen ausgeführt. Im Allgemeinen wird GET zum Abrufen von Daten verwendet, während POST zum Senden von Daten (und zum Zurückgeben einer Antwort) verwendet wird. Daten können mit GET gesendet werden, aber POST ist fast immer die bessere Wahl - insbesondere für Formulardaten. Möglicherweise haben Sie GET-Anfragen schon einmal gesehen - sie senden die an die URL angehängten Daten:

Irgendwo.com/index.html? Name = Joe

Das Fragezeichen weist den Browser darauf hin, dass alle unmittelbar darauf folgenden Daten nicht zum Durchlaufen der Website verwendet werden sollen, sondern zur Verarbeitung an die Seite weitergeleitet werden sollen. Dies funktioniert gut für einfache Dinge wie eine Seitenzahl, hat aber einige Nachteile:

Maximale Zeichenbegrenzung: Es gibt eine maximale Anzahl von Zeichen, die in einer URL gesendet werden können. Möglicherweise haben Sie nicht genug, wenn Sie versuchen, eine große Datenmenge zu senden.
Sichtweite: Jeder kann sehen, dass die Daten in einer GET-Anfrage gesendet werden. Dies ist nicht gut für vertrauliche Daten wie Kennwörter oder Formulardaten.

POST-Anfragen funktionieren auf ähnliche Weise, nur dass sie die Daten nicht in der URL senden. Dies bedeutet, dass eine größere Datenmenge gesendet werden kann (Daten werden als bezeichnet Nutzlast), und etwas Sicherheit wird dadurch erreicht, dass die Daten nicht verfügbar gemacht werden. Auf die Daten kann jedoch weiterhin problemlos zugegriffen werden SSL-Zertifikat Was ist ein SSL-Zertifikat und benötigen Sie eines?Das Surfen im Internet kann beängstigend sein, wenn es um persönliche Informationen geht. Weiterlesen wenn Sie absolute Ruhe wünschen.

Unabhängig davon, ob POST oder GET verwendet wird, werden Daten gesendet Schlüssel -> Wert Paare. In der obigen URL lautet der Schlüssel Nameund der Wert ist Joe.

Der bessere Weg, Formulare einzureichen, ist die Verwendung Asynchrones JavaScript und XML (AJAX). JavaScript unterstützt AJAX-Aufrufe, deren Verwendung jedoch verwirrend sein kann. JQuery implementiert genau diese Methoden, jedoch auf einfach zu verwendende Weise. Sie können Ihren Browser anweisen, eine GET- oder POST-Anforderung auszuführen. Halten Sie sich in diesem Beispiel an POST, aber GET-Anforderungen werden auf ähnliche Weise ausgeführt.

Hier ist die Syntax:

$ .post ('some / url', $ ('# myForm'). serialize ());

Dieser Code macht mehrere Dinge. Der erste Teil ($) teilt Ihrem Browser mit, dass Sie jQuery für diese Aufgabe verwenden möchten. Der zweite Teil nennt das Post Methode von jQuery. Sie müssen zwei Parameter übergeben; Die erste ist die URL, an die die Daten gesendet werden sollen, während die zweite die Daten sind. Möglicherweise stellen Sie (abhängig von der URL, auf die Sie zugreifen möchten) fest, dass Ihre Browser gleicher Herkunft Sicherheitsrichtlinien können hier stören. Sie können aktivieren Ursprungsübergreifende gemeinsame Nutzung von Ressourcen Um dies zu umgehen, reicht es oft aus, einfach auf eine URL zu verweisen, die auf derselben Domain wie Ihre Seite gehostet wird.

Der zweite Parameter ruft die jQuery auf serialisieren Methode auf Ihrem Formular. Diese Methode greift auf alle Daten aus Ihrem Formular zu und bereitet sie für die Übertragung vor - sie serialisiert sie.

Dieser Code allein reicht aus, um ein Formular einzureichen, aber Sie können feststellen, dass sich die Dinge etwas seltsam verhalten. Es lohnt sich, die Entwickler-Tools Ihres Browsers zu untersuchen, da das Debuggen von Netzwerkanforderungen zum Kinderspiel wird.

Alternative, Briefträger ist ein ausgezeichnetes kostenloses Tool zum Testen von HTTP-Anforderungen.

Wenn Sie Ihr Formular mit AJAX senden möchten, während Sie auf die Schaltfläche "Senden" klicken, ist dies genauso einfach. Sie müssen Ihren Code an die anhängen einreichen Ereignis des Formulars. Hier ist der Code:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); falsch zurückgeben; });

Dieser Code macht mehrere Dinge. Wenn Ihr Formular gesendet wird, kommt Ihr Browser und führt zuerst Ihren Code aus. Ihr Code sendet dann die Formulardaten mit AJAX. Der letzte Schritt besteht darin, zu verhindern, dass das Originalformular gesendet wird. Sie haben dies bereits mit AJAX getan, damit es nicht erneut auftritt.

Wenn Sie nach Abschluss des AJAX eine andere Aufgabe ausführen möchten (oder möglicherweise sogar eine Statusmeldung zurückgeben möchten), müssen Sie a verwenden Ruf zurück. JQuery macht diese sehr einfach zu bedienen - übergeben Sie einfach eine Funktion als einen anderen Parameter wie diesen:

$ .post ('url', $ ('# myForm'). serialize (), function (result) {console.log (result); }

Das Ergebnis Das Argument enthält alle Daten, die von der URL zurückgegeben wurden, an die die Daten gesendet wurden. Sie können leicht auf diese Daten reagieren:

if (result == 'success') {// mache eine Aufgabe. } sonst {// mache eine andere Aufgabe. }

Das war's für diesen Beitrag. Hoffentlich haben Sie jetzt ein solides Verständnis für HTTP-Anforderungen und die Funktionsweise von AJAX im Kontext eines Formulars.

Hast du heute neue Tricks gelernt? Wie verwendet man AJAX mit Formularen? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit!

Bildnachweis: vectorfusionart / Shutterstock