직렬화 없이 HTML5 FormData를 JSON으로 변환하는 방법은 무엇입니까?

직렬화 없이 HTML5 FormData를 JSON으로 변환

HTML5 양식으로 작업할 때 양식의 데이터를 JSON으로 변환해야 할 필요성이 발생할 수 있습니다. 일반적인 접근 방식 중 하나는 FormData 개체를 직렬화하는 것입니다. 그러나 이는 모든 경우에 바람직하지 않을 수 있습니다. 직렬화 없이 FormData 항목을 JSON으로 변환하는 방법은 다음과 같습니다.

1단계: FormData 객체 반복

forEach() 메서드를 사용하여 FormData 객체의 항목을 반복합니다. 항목. 각 항목에는 키(필드 이름)와 값(입력 값)이 포함됩니다.

2단계: 일반 객체 생성

빈 객체를 초기화하여 변환된 객체를 저장합니다. JSON 데이터.

3단계: 항목을 키-값 쌍으로 변환

forEach() 콜백 내에서 해당 키를 기반으로 객체에 값을 할당합니다. 예:

<code class="javascript">formData.forEach(function(value, key) {
    object[key] = value;
});</code>

4단계: 객체를 JSON으로 변환

마지막으로 JSON.stringify() 메서드를 사용하여 객체를 JSON 문자열로 변환합니다.

<code class="javascript">var json = JSON.stringify(object);</code>

ES6 화살표 함수 사용

ES6 화살표 함수를 사용하여 forEach() 루프를 단순화할 수 있습니다.

<code class="javascript">formData.forEach((value, key) => object[key] = value);</code>

여러 값 지원

양식에 다중 선택 목록과 같이 여러 값이 있는 필드가 포함된 경우 이를 지원하도록 위 코드를 수정할 수 있습니다.

<code class="javascript">formData.forEach((value, key) => {
    if (!Array.isArray(object[key])) {
        object[key] = [object[key]];
    }
    object[key].push(value);
});</code>

FormData를 직접 보내기

XMLHttpRequest를 통해 양식 데이터를 제출하는 것이 목표라면 FormData 개체를 JSON으로 변환하지 않고 직접 보내는 것을 고려할 수 있습니다. 이 접근 방식은 Fetch API에서도 지원됩니다.

복잡한 개체 처리

복잡한 개체를 처리할 때 JSON.stringify() 메서드에 제한이 발생할 수 있습니다. 이러한 경우에는 객체 내에 toJSON() 메서드를 정의하여 사용자 정의 직렬화 논리를 지정하는 것이 좋습니다.

위 내용은 직렬화 없이 HTML5 FormData를 JSON으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!