HTML5 FormData를 JSON으로 어떻게 변환합니까?

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를 사용하여 가능합니다.

<code class="javascript">var request = new XMLHttpRequest();
request.open('POST', 'http://example.com/submitform.php');
request.send(formData);</code>

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

업데이트 4: 복잡한 개체의 JSON 직렬화

복합 개체에 대해 사용자 정의 직렬화 논리를 정의할 수 있습니다. toJSON() 메서드를 통해 객체를 생성합니다.

위 내용은 HTML5 FormData를 JSON으로 어떻게 변환합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!