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.