HTML 양식 데이터를 통해 JSON 개체를 전송하는 방법은 무엇입니까?

HTML 양식 데이터를 통해 JSON 개체 전송

양식을 제출할 때 데이터는 일반적으로 개별 양식 필드로 전송됩니다. 그러나 데이터를 JSON 개체로 전송하려는 경우 다음 방법을 활용할 수 있습니다.

방법 1: FormData 배열 직렬화

jQuery의 serializeArray()를 사용하여 양식 데이터를 배열로 변환합니다. 메서드를 생성한 다음 JSON으로 문자열화합니다.

var formData = JSON.stringify($("#myForm").serializeArray());

방법 2: 숨겨진 텍스트 영역

양식 내에 숨겨진 텍스트 영역을 만들고 해당 값을 JSON 문자열화된 양식 데이터로 설정합니다. 이 방법을 사용하면 양식 제출 후 서버 측 데이터에 액세스할 수 있습니다.

<input type="hidden" name="data" value="{&quot;first_name&quot;:&quot;binchen&quot;,&quot;last_name&quot;:&quot;heris&quot;}">

서버 측 디코딩

JSON 데이터가 일반 양식 제출의 일부로 전송되는 경우 서버 측에서 디코딩해야 합니다. 예를 들어, PHP에서는

$data = json_decode($_POST['data']);

XHR 오류 해결

코드에서 Content-Type 헤더를 명시적으로 application/json으로 설정하지 않는 데 문제가 있을 수 있습니다. 수정된 코드는 다음과 같습니다.

xhr.setRequestHeader('Content-Type', 'application/json');

위 내용은 HTML 양식 데이터를 통해 JSON 개체를 전송하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!