HTML5 FormData를 JSON으로 변환

HTML5 FormData 객체의 항목을 JSON으로 변환하는 것은 웹 개발의 일반적인 작업입니다. 이를 달성하기 위한 다양한 접근 방식이 있지만 가장 간단하고 효율적인 방법은 FormData 객체에서 직접 forEach() 함수를 사용하는 것입니다.

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: XMLHttpRequest 및 Fetch API를 통한 직접 제출

변환 없이 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() 메서드를 통해 복잡한 객체에 대한 사용자 정의 직렬화 논리를 정의할 수 있습니다.