Ajax를 사용하여 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">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

그러나 이 접근 방식은 양식 입력에서 실제 데이터를 검색하지 않기 때문에 실패합니다.

解决方案

이 문제를 해결하는 열쇠는 완전한 양식 데이터를 얻는 데 있습니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.

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

serializeArray() 메서드는 양식 데이터를 키-값 쌍의 배열로 변환합니다. 이 배열을 JSON 문자열로 변환하면 원하는 JSON 객체를 얻을 수 있습니다.

Ajax와의 통합

Ajax를 사용하여 JSON 데이터를 전송하려면 다음을 사용할 수 있습니다. 다음 코드:

<code class="javascript">$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType: "application/json"
});</code>

이제 사용자가 양식을 제출하면 양식 데이터가 포함된 JSON 객체가 Ajax를 통해 지정된 서버 URL로 전송됩니다.

이 접근 방식은 편리한 HTML 양식 데이터를 JSON 개체로 보내는 효율적인 방법을 제공하여 웹 애플리케이션의 다양성과 기능을 향상시킵니다.

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