Spesso ci torna utile serializzare una form HTML in JSON, invece di utilizzare la normale notazione di default in stile query string, poiché, magari, i dati inseriti al suo interno dovranno essere inviati ad un endpoint che si aspetta come corpo della richiesta dei dati in formato JSON.
Possiamo risolvere questa necessità utilizzando lo script riportato di seguito:
$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) o[this.name] = o[this.name]; } else { o[this.name] = this.value || ''; } }); return o; };
A livello funzionale, non facciamo altro che aggiungere tramite l'alias fn un nuovo prototipo di funzione serializeObject, che, preso in input l'istanza dell'oggetto, itera su ogni elemento dell'array generato dalla serializzazione dell'oggetto aggiungendolo, qualora non sia già presente. Una volta aggiunti tutti gli elementi, utilizziamo il metodo stringify per rappresentare l'array con la notazione chiave-valore tipica di JSON. Lo script dovrà essere richiamato nel seguente modo:
var json = JSON.stringify($('#myForm').serializeObject());
Tale riga di codice produrrà l'output riportato nella figura sottostante, che come possiamo aspettarci potrà essere utilizzato facilmente in operazioni di deserializzazione server side.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire undefined e partial nelle reactive forms di Angular
Eseguire le GitHub Actions offline
Reactive form tipizzati con modellazione del FormBuilder in Angular
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Eseguire operazioni con timeout in React
Usare una container image come runner di GitHub Actions
Elencare le container images installate in un cluster di Kubernetes
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Gestire liste di tipi semplici con Entity Framework Core
Creare form tipizzati con Angular
Creare gruppi di client per Event Grid MQTT
Catturare la telemetria degli eventi di output cache in ASP.NET Core
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10