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
Load test di ASP.NET Core con k6
Implementare l'infinite scroll con QuickGrid in Blazor Server
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare le collection expression in C#
Utilizzare la session affinity con Azure Container Apps
Criptare la comunicazione con mTLS in Azure Container Apps
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Reactive form tipizzati con modellazione del FormBuilder in Angular
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Sostituire la GitHub Action di login su private registry
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON