jQuery Form Plugin – Do some AJAX magic easily
Neulich bin ich über ein Plugin gestoßen, dass Entwicklern auf einfachstem Wege die Möglichkeit bietet ihre Formulare AJAX gestützt umzusetzen.
Mitentwickelt wurde es von John Resig, einem der Urväter von jQuery.
Es überzeugt durch seine Funktionsvielfalt, sowie seine einfache Umsetzung. Es genügt ein Standard HTML Formular zu schreiben und danach das Plugin mit den gewünschten Optionen aufzurufen.
Das könnte dann wie folgt aussehen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <head> <script type="text/javascript" src="path/to/jquery.js"></script> <script type="text/javascript" src="path/to/form.js"></script> <script type="text/javascript"> $(document).ready(function() { // bind 'myForm' and provide a simple callback function $('#myForm').ajaxForm(function() { alert("Formular wurde gesendet!"); }); }); </script> </head> <body> <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Kommentar: <textarea name="kommentar"></textarea> <input type="submit" value="Abschicken" /> </form> </body> |
Dieses Beispiel sendet die beiden Formularfelder Name und Kommentar als Ajax Request an das im form-tag angegebene Skript.
Dies ist nur ein einfaches Beispiel. Weiterhin gibt es noch Methoden zur Formularberarbeitung wie reset, manueller submit, Erstellung eines querystring, etc.
Das Plugin besitzt auch noch einige Optionen. Ein Auszug daraus:
- target
- url
- success
- …
Altgedienten Ajaxianer sollten diese Parameter bekannt sein. Benutzt werden sie dann so:
1 2 3 4 5 6 7 8 9 10 11 | // Optionobjekt mit gesetzten Attributen var options = { target: '#divToUpdate', url: 'comment.php', success: function() { alert('Erfolgreich abgeschickt!'); } }; // Options einfach der Mehthode ajaxForm als Parameter übergeben $('#myForm').ajaxForm(options); |
Einfacher lässt sich ein Ajaxformular kaum umsetzen. Also viel Spaß beim Testen. Zu finden ist das Ganze in englischer Doku und kleinen Beispielen bei Malsup.
Letzte Kommentare