jQuery 없이 HTML5 FormData 항목을 JSON으로 변환하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

jQuery 없이 HTML5 FormData 항목을 JSON으로 변환하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-10-29 19:48:02

원래의

232명이 탐색했습니다.

How to Convert HTML5 FormData Entries into JSON without jQuery?

HTML5 FormData 항목을 JSON으로 변환

양식 데이터로 작업하고 이를 서버 엔드포인트 또는 API에 전달할 때 HTML5 FormData 항목을 JSON으로 변환하는 것이 필수적입니다. 다음은 jQuery 또는 직렬화에 의존하지 않는 솔루션입니다.

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

로그인 후 복사

가독성과 간결성을 높이기 위해 ES6 화살표 기능을 사용할 수 있습니다.

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

로그인 후 복사

다중 값 처리 양식 요소:

다중 선택 목록이나 여러 값이 있는 기타 양식 요소를 지원해야 하는 경우 다음과 같이 솔루션을 확장할 수 있습니다.

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

로그인 후 복사

직접 변환 없이 서버에 제출:

FormData를 서버에 제출하는 것이 목표라면 JSON 변환 단계를 우회하고 Ajax 또는 Fetch API를 통해 FormData 개체 자체를 직접 보낼 수 있습니다.

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) => { 
  // Handle server response here... 
});

로그인 후 복사

직렬화할 수 없는 개체에 대한 고려 사항:

JSON 문자열화 방법은 추가 사용자 지정 없이는 모든 유형의 개체를 처리하지 못할 수 있다는 점을 기억하세요. 객체 직렬화에 문제가 발생하는 경우 객체에 고유한 toJSON() 메서드를 정의하여 원하는 직렬화 동작을 지정할 수 있습니다.

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