Formulare für AJAX Request Serialisieren und als JSON senden

Mit den Methoden des DOM die Daten eines Formulars auf ein Array lesen damit sie als JSON gesendet werden können

Auf der Suche nach einer Alternative zu jQuery(form).serialize(); was ja lediglich den Default Enctype erzeugt, geht der Weg an einer zweckmäßigen Datenstruktur nicht vorbei. Insbesondere in Hinsicht auf Integrität, Performance, Wartungsfreundlichkeit und Erweiterbarkeit auf andere Enctypes (Content-Type) und Webservice.

So erzeugt die Funktion sampleform() meiner kleine Library request.js eine universelle Datenstruktur aus welcher beliebige Content-Types wie application/x-www-form-urlencoded, application/json, application/xml und beliebig Andere recht einfach erzeugt werden können. Von daher beschreibt dieser Artikel sehr viel mehr als nur eine Alternative zu jQuery(form).serialize();

Testen Sie diese Library

Namen
Datierungen
Farben
Sonstiges
Wähle Serializer

Hinweis: Mit der Auswahl Sample wird das Array über eine eigene Funktion sampleform() erzeugt. Die Auswahl jQuery hingegen erzeugt das Array über jQuery(form).serializeArray(). Der Unterschied besteht darin, daß die eigene Funktion die FileAPI implementiert, also das Upload von Dateien unterstützt.

Eräuterungen

Mit der erzeugten Datenstruktur lassen sich für den Ajax Request recht einfach beliebige Enctypes erstellen. In dieser Demo werden die Daten jedoch nicht gesendet sondern nur als Dump und als Tabelle ausgegeben. Letztere zeigt, daß sich die Datenstruktur auch trefflich eignet, ein Template zu rendern.

Sofern das Formular Dateianlagen enthält, gibt es im entsprechenden Arrayelement den Schlüssel filename und natürlich auch den Dateinhalt. Mit einem passenden Serializer und Enctype können hiermit also auch recht einfach Multiple Uploads realisiert werden, ein solcher Serializer ist natürlich auch hier verfügbar für einen proprietären Enctype eav/binary als moderne Alternative zum bisherigen Enctype multipart/form-data. Hierzu wird die Array-Datenstruktur transformiert in eine Entity/Attribute/Value-Datenstruktur (EAV). Der Serializer ist in EAV.js verfügbar.


Die rein persönlichen Zwecken dienende Seite verwendet funktionsbedingt einen Session-Cookie. Datenschutzerklärung: Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. @: Rolf Rost, Am Stadtgaben 27, 55276 Oppenheim, nmq​rstx-18­@yahoo.de