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
Generare file per il download da Blazor WebAssembly
Creare moduli CSS in React
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Load test di ASP.NET Core con k6
Aggiungere interattività lato server in Blazor 8
Configurare policy CORS in Azure Container Apps
Reactive form tipizzati con modellazione del FormBuilder in Angular
Eseguire attività pianificate con Azure Container Jobs
Utilizzare ChatGPT con Azure OpenAI