So verwenden Sie AJAX zum Senden eines Webformulars

Möglicherweise haben Sie unseren jQuery-Leitfaden gelesen. Ein grundlegender Leitfaden für JQuery für Javascript-Programmierer. Ein grundlegender Leitfaden für JQuery für Javascript-Programmierer. Wenn Sie ein Javascript-Programmierer sind, hilft Ihnen dieser Leitfaden für JQuery beim Programmieren wie ein Ninja. Lesen Sie mehr sowie den fünften Teil unseres jQuery-Tutorials zu AJAX jQuery-Tutorial (Teil 5): AJAX Them All! jQuery Tutorial (Teil 5): AJAX ihnen alle! Am Ende unserer jQuery-Minitutorialserie wird es Zeit, dass wir uns eingehender mit einer der am häufigsten verwendeten Funktionen von jQuery befassen. AJAX ermöglicht es einer Website, mit… Read More zu kommunizieren, aber heute zeige ich Ihnen, wie Sie AJAX zum dynamischen Senden eines Webformulars verwenden. JQuery ist bei weitem die einfachste Methode, AJAX zu verwenden. Schauen Sie sich also unser Tutorial für Anfänger an und warum ist es fantastisch. Diese Woche denke ich, es ist an der Zeit, dass wir uns mit etwas Code schmutzig machen und wie… Lesen Sie mehr, wenn Sie Anfänger sind. Lass uns gleich rein springen.

Warum AJAX verwenden?

Sie fragen sich vielleicht “Warum brauche ich AJAX??” HTML ist perfekt in der Lage, Formulare zu übermitteln, und das auf ziemlich schmerzlose Weise. AJAX ist in einer großen Mehrheit der Webseiten implementiert, und seine Beliebtheit steigt weiter an.

Der große Vorteil von AJAX ist die Fähigkeit teilweise laden Teile von Webseiten. Dadurch werden Seiten schneller und ansprechender dargestellt und Sie sparen Bandbreite, da nur ein kleiner Teil der Daten anstelle der gesamten Seite neu geladen werden muss. Hier einige grundlegende AJAX-Anwendungsfälle:

• Prüfen Sie regelmäßig nach neuen E-Mails.
• Aktualisieren Sie alle 30 Sekunden einen Live-Fußball-Score.
• Aktualisieren Sie den Preis für eine Online-Auktion.

AJAX bietet Ihnen als Entwickler die nahezu unbegrenzte Möglichkeit, Webseiten schnell, ansprechend und bissig zu gestalten. Dafür werden sich Ihre Besucher bedanken.

Das HTML

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

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

       
 Name:  Alter:   
   

Diese HTML-Datei definiert ein Formular mit einigen Elementen. Beachten Sie, wie es gibt Aktion und Methode Attribute. Diese definieren, wo und wie das Formular übermittelt wird. Sie werden nicht benötigt, wenn Sie AJAX verwenden, aber es ist eine gute Idee, sie zu verwenden, da sichergestellt ist, dass Besucher Ihrer Website es weiterhin verwenden können, wenn JavaScript deaktiviert ist. Diese Seite enthält jQuery, das von Google im CDN gehostet wird. Was CDNs sind und warum Speicher kein Problem mehr ist Was CDNs sind und warum Speicher nicht mehr ein Problem ist CDNs machen das Internet schnell und erschwinglich, selbst wenn Sie Millionen Benutzer erreichen. Erstens kostet Bandbreite Geld; Diejenigen von uns mit befristeten Verträgen wissen das nur zu gut. Nicht nur Sie… Lesen Sie weiter. Das Kopf enthält ein Skript tag - hier schreiben Sie Ihren Code.

Dieses Formular mag im Moment etwas langweilig aussehen, daher sollten Sie CSS in 5 Schritten zum CSS lernen und zum Kick-Ass-CSS-Zauberer werden. 5 Baby-Schritte zum CSS-Lernen und zum Kick-Ass-CSS-Zauberer. CSS ist die einzige Komponente Die wichtigsten Änderungswebseiten haben im letzten Jahrzehnt gesehen und den Weg für die Trennung von Stil und Inhalt geebnet. Auf moderne Weise definiert XHTML die semantische Struktur… Lesen Sie mehr, um es etwas aufzuwerten.

Das JavaScript

Es gibt mehrere Möglichkeiten, Formulare mit JavaScript zu übermitteln. Der erste und einfachste Weg ist dies durch die einreichen Methode:

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

Sie können das Formular natürlich auch mit jQuery anvisieren - es macht keinen Unterschied:

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

Dieser Befehl weist Ihren Browser an, das Formular zu senden, genau wie das Senden der Schaltfläche. Es zielt auf die Form anhand ihrer ID. In diesem Fall ist das der Fall meineForm. Dies ist kein AJAX, also wird die gesamte Seite neu geladen - etwas, das nicht immer wünschenswert ist.

In dem Methode Als Attribut Ihres Formulars haben Sie angegeben, wie das Formular gesendet werden soll. Das kann sein POST oder ERHALTEN. Dieses Attribut wird nicht verwendet, wenn Formulare mit AJAX gesendet werden. Die gleiche Methode kann jedoch verwendet werden.

Ein Großteil des modernen Internets wird von GET- oder POST-Anfragen abgelöst. Im Allgemeinen wird GET zum Abrufen von Daten verwendet, während POST zum Senden von Daten (und zum Senden 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 bereits GET-Anfragen gesehen - sie senden die an die URL angehängten Daten:

somewebsite.com/index.html?name=Joe

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

Maximale Zeichenbegrenzung: Es können maximal Zeichen in einer URL gesendet werden. Sie haben möglicherweise nicht genug, wenn Sie versuchen, große Datenmengen zu senden.
Sichtweite: Jeder kann sehen, dass die Daten in einer GET-Anfrage gesendet werden. Dies ist für sensible Daten wie Kennwörter oder Formulardaten ungeeignet.

POST-Anforderungen funktionieren ähnlich, nur sie senden die Daten in der URL nicht. Dies bedeutet, dass eine größere Datenmenge gesendet werden kann (Daten werden als a bezeichnet Nutzlast), und etwas Sicherheit wird dadurch erzielt, dass die Daten nicht offengelegt werden. Auf die Daten kann jedoch immer noch leicht zugegriffen werden. Sehen Sie sich also ein SSL-Zertifikat an. Was ist ein SSL-Zertifikat und benötigen Sie eines? Was ist ein SSL-Zertifikat und benötigen Sie eines? Das Surfen im Internet kann unheimlich sein, wenn persönliche Informationen betroffen sind. Lesen Sie mehr, wenn Sie absolute Ruhe haben möchten.

Unabhängig davon, ob POST oder GET verwendet wird, werden Daten gesendet Schlüssel -> Wert Paare. In der URL oben steht der Schlüssel Name, und 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 dieselben Methoden, kann jedoch auf einfache Weise verwendet werden. Sie können Ihren Browser anweisen, eine GET- oder POST-Anforderung auszuführen. Halten Sie sich für dieses Beispiel an den POST. GET-Anforderungen werden jedoch auf ähnliche Weise ausgeführt.

Hier ist die Syntax:

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

Dieser Code führt mehrere Dinge aus. Der erste Teil ($) teilt Ihrem Browser mit, dass Sie für diese Aufgabe jQuery verwenden möchten. Der zweite Teil nennt die 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 ist. Sie können (abhängig von der URL, auf die Sie zugreifen möchten) feststellen, dass Ihre Browser gleicher Herkunft Sicherheitsrichtlinien können hier stören. Um dies zu umgehen, können Sie die urheberrechtliche Ressourcennutzung aktivieren. Es reicht jedoch oft, auf eine URL zu verweisen, die in derselben Domäne wie Ihre Seite gehostet wird.

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

Dieser Code allein reicht aus, um ein Formular zu übermitteln. Es kann jedoch sein, dass die Dinge ein bisschen seltsam wirken. Es lohnt sich, die Tools Ihres Browser-Entwicklers zu untersuchen, da diese das Debuggen von Netzwerkanfragen zum Kinderspiel machen.

Alternativ ist Postman ein hervorragendes kostenloses Tool zum Testen von HTTP-Anforderungen.

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

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

Dieser Code führt mehrere Dinge aus. Wenn Ihr Formular gesendet wird, wird Ihr Browser zuerst mit dem Code ausgeführt. Ihr Code übermittelt dann die Formulardaten mit AJAX. Als letzten Schritt müssen Sie verhindern, dass das Originalformular gesendet wird. Dies haben Sie bereits mit AJAX durchgeführt, damit Sie nicht möchten, dass es erneut auftritt!

Wenn Sie nach Beendigung des AJAX eine andere Aufgabe ausführen möchten (oder sogar eine Statusmeldung zurückgeben möchten), müssen Sie eine 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 (), Funktion (Ergebnis) console.log (Ergebnis);

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

if (result == 'success') // eine Aufgabe erledigen else // eine andere Aufgabe ausführen 

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

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

Bildnachweis: vectorfusionart / Shutterstock

Erfahren Sie mehr über: JavaScript, jQuery, Webentwicklung.