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

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

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

  First Name:
  
  Last Name:
  
  

우리의 목표는 이 양식의 데이터를 JSON 개체로 변환하고 양식 제출 시 서버로 전송하는 것입니다.

처음에는 다음을 사용하여 솔루션을 시도했을 수도 있습니다. 다음 코드:

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

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

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

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

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

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

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