Convertir HTML5 FormData a JSON

Convertir las entradas de un objeto HTML5 FormData a JSON es una tarea común en el desarrollo web. Si bien existen varios enfoques para lograr esto, el método más sencillo y eficiente es usar la función forEach() directamente en el objeto FormData.

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

Este enfoque recorre cada par clave-valor en el objeto FormData y los agrega a un nuevo objeto JavaScript. Luego, el método JSON.stringify() se usa para convertir el objeto en una cadena JSON.

Actualización: Funciones de flecha de ES6

Para aquellos que prefieren la sintaxis de ES6, el La misma solución se puede escribir usando funciones de flecha:

var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);

Actualización 2: compatibilidad con elementos de formulario de valores múltiples

Para admitir elementos de formulario con valores múltiples, como la selección múltiple listas, se puede utilizar el siguiente código:

var object = {};
formData.forEach((value, key) => {
    if(!Reflect.has(object, key)){
        object[key] = value;
        return;
    }
    if(!Array.isArray(object[key])){
        object[key] = [object[key]];    
    }
    object[key].push(value);
});
var json = JSON.stringify(object);

Actualización 3: Envío directo a través de XMLHttpRequest y Fetch API

Es posible enviar FormData directamente a un servidor sin conversión utilizando el Objeto XMLHttpRequest o API Fetch:

var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);

fetch('http://example.com/submitform.php', {
  method: 'POST',
  body: formData
}).then((response) => { 
  // do something with response here... 
});

Actualización 4: Serialización JSON de objetos complejos

Se puede definir una lógica de serialización personalizada para objetos complejos mediante el método toJSON().