Преобразование HTML5 FormData в JSON

Преобразование записей объекта HTML5 FormData в JSON — распространенная задача в веб-разработке. Хотя существуют различные подходы для достижения этой цели, наиболее простым и эффективным методом является использование функции forEach() непосредственно в объекте FormData.

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

Этот подход перебирает каждую пару ключ-значение в объекте FormData и добавляет их в новый объект JavaScript. Затем метод JSON.stringify() используется для преобразования объекта в строку JSON.

Обновление: стрелочные функции ES6

Для тех, кто предпочитает синтаксис ES6, то же решение можно записать с использованием стрелочных функций:

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

Обновление 2: поддержка элементов формы с несколькими значениями

Для поддержки элементов формы с несколькими значениями, например множественного выбора списки, можно использовать следующий код:

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);

Обновление 3: прямая отправка через API XMLHttpRequest и Fetch

Отправка FormData непосредственно на сервер без преобразования возможна с помощью Объект XMLHttpRequest или Fetch API:

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... 
});

Обновление 4: сериализация сложных объектов в формате JSON

Пользовательскую логику сериализации можно определить для сложных объектов с помощью метода toJSON().