HTML 양식 데이터에서 JSON 개체를 만드는 방법은 무엇입니까?

HTML 양식 데이터에서 JSON 개체 만들기

웹 개발 영역에서는 데이터를 서버에 원활하게 전송하는 것이 중요합니다. HTML 양식을 다룰 때 JSON 형식으로 데이터를 전달해야 하는 경우가 있습니다. 이 기사에서는 장애물을 만나지 않고 이를 달성하기 위한 최적의 접근 방식에 대해 자세히 설명합니다.

다음 HTML 형식을 예로 들어 보겠습니다.

<code class="html"><form action="myurl" method="POST" name="myForm">
  <label for="first_name">First Name:</label>
  <input type="text" name="first_name" id="fname">
  <label for="last_name">Last Name:</label>
  <input type="text" name="last_name" id="lname">
  <input value="Submit" type="submit" onclick="submitform()">
</form></code>

우리의 목표는 이 형식의 데이터를 JSON 개체를 생성하고 양식 제출 시 이를 서버로 전송합니다.

처음에는 다음 코드를 사용하여 해결 방법을 시도했을 수도 있습니다.

<code class="javascript">function submitform(){
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
  var j = {
    "first_name":"binchen",
    "last_name":"heris",
  };
  xhr.send(JSON.stringify(j));
}</code>

그러나 이 접근 방식은 중요한 문제로 인해 부족합니다. 결함. 양식에서 데이터를 검색하는 대신 샘플 JSON 객체를 수동으로 생성했습니다. 이 문제를 해결하려면 양식 데이터를 동적으로 수집해야 합니다.

해결책은 jQuery의 기능을 활용하여 양식 데이터를 배열로 추출한 다음 이를 JSON 문자열로 변환하는 것입니다.

<code class="javascript">var formData = JSON.stringify($("myForm").serializeArray());</code>

이 코드 줄은 양식의 모든 데이터를 효과적으로 캡처하여 원하는 JSON 형식으로 변환합니다. 그런 다음 AJAX 요청에서 이 JSON 문자열을 활용하거나, AJAX가 옵션이 아닌 경우 이를 숨겨진 텍스트 영역에 통합하고 전통적으로 양식을 제출할 수 있습니다.

또한 데이터를 JSON 문자열로 전송하는 경우 표준 HTML 양식을 통해 배열 형식의 개별 데이터 포인트에 액세스하려면 서버 측에서 디코딩해야 한다는 점에 유의하세요.

이 접근 방식을 따르면 HTML 양식에서 JSON 개체를 쉽게 보낼 수 있습니다. , 원활한 데이터 전송과 효율적인 서버 통신을 보장합니다.

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