양식 데이터를 JSON 형식으로 어떻게 보낼 수 있나요?

양식 데이터를 JSON 개체로 보내는 방법

HTML 양식을 작성할 때 JSON과 같은 구조화된 형식으로 데이터를 보내야 하는 경우가 많습니다. . 이를 용이하게 하기 위해 양식 데이터를 JSON 개체로 변환하여 서버로 전송하는 방법을 살펴보겠습니다.

양식 데이터를 JSON으로 변환(클라이언트측)

양식 데이터를 JSON 객체로 변환하려면:

1. JavaScript의 FormData 객체(예: const formData = new FormData(form))를 사용하여 양식 데이터를 검색합니다.
2. 양식 요소를 반복합니다. 해당 값을 JSON 객체로 추출합니다(예: json = JSON.stringify(formData.entries())).

예:

&lt ;pre>
<script type="text/javascript">
const form = document.getElementById("myForm");

form.addEventListener("제출", function(e ) {

e.preventDefault();

const formData = new FormData(form);
const json = JSON.stringify(formData.entries());

});
</script>
</pre>

헤더 설정 및 서버로 JSON 보내기(서버 측) )

JSON 문자열이 있으면 XMLHttpRequest 또는 선호하는 네트워크 요청 방법을 사용하여 서버에 보낼 수 있습니다. JSON 데이터에 대한 적절한 헤더를 설정해야 합니다.

<pre>
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
&lt ;/pre>

예(XMLHttpRequest 사용):

<pre>
const xhr = new XMLHttpRequest();
xhr.open( "POST", "myUrl", true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(json);
</pre>

서버에서 수신된 JSON 데이터 처리

서버 측에서는 수신된 데이터를 JSON 개체로 구문 분석하고 이에 따라 해당 속성에 액세스할 수 있습니다.

예(Node.js 사용):

<pre>
const body = request.body.toString();
const data = JSON.parse(body);

console.log(data.first_name);
</pre>

위 내용은 양식 데이터를 JSON 형식으로 어떻게 보낼 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!