클라이언트-서버 통신을 위해 HTML5 FormData를 JSON으로 변환하는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-10-26 18:33:30
원래의
639명이 탐색했습니다.

How to Convert HTML5 FormData to JSON for Client-Server Communication?

HTML5 FormData를 JSON으로 변환

HTML5 FormData 객체를 JSON으로 변환하면 양식 데이터를 기계가 읽을 수 있는 형식으로 직렬화할 수 있습니다. 이는 클라이언트와 서버 간에 데이터를 전송하는 데 유용합니다.

사용자 정의 개체 및 JSON.stringify를 사용하는 방법

jQuery나 직렬화 없이 FormData 항목을 JSON으로 변환하려면 전체 객체:

<code class="javascript">var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);</code>
로그인 후 복사

업데이트 1: ES6 화살표 함수

ES6 화살표 함수 사용:

<code class="javascript">var object = {};
formData.forEach((value, key) => object[key] = value);
var json = JSON.stringify(object);</code>
로그인 후 복사

업데이트 2: 다중 값 요소 지원

다중 선택 목록 또는 다중 값이 있는 기타 양식 요소의 경우:

<code class="javascript">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);</code>
로그인 후 복사

업데이트 3: FormData 직접 전송

XMLHttpRequest를 통해 FormData를 서버로 보내는 경우:

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

또는 Fetch API를 사용하는 경우:

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

업데이트 4: 복잡한 경우 사용자 정의 toJSON 메서드 객체

사용자 정의 객체의 경우 toJSON 메서드를 정의하여 콘텐츠를 직렬화합니다. JSON.stringify 제한 사항에 대한 자세한 내용은 MDN 문서를 참조하세요.

위 내용은 클라이언트-서버 통신을 위해 HTML5 FormData를 JSON으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿