jQuery로 HTML 폼에서 키/값 데이터 세트를 손쉽게 추출하는 방법

HTML 폼의 키/값 데이터 세트 가져오기

HTML 폼(form)에서 입력된 데이터를 키/값(key/value) 형태의 데이터 세트로 변환하려면 jQuery를 사용하는 것이 가장 간편합니다. jQuery가 기본으로 제공하는 직렬화(serialize) 메서드를 활용하면 폼의 모든 입력값을 자동으로 수집할 수 있습니다.

1. HTML 폼 준비하기

먼저 다음과 같이 간단한 HTML 폼을 작성합니다.

<form id = "form1">
   <input type = "text" name = "demo" />
</form>

위 폼에는 demo라는 이름(name)을 가진 텍스트 입력 필드 하나가 포함되어 있습니다. 이 이름이 곧 데이터의 '키' 역할을 하며, 사용자가 입력한 값이 '값'에 해당합니다.

2. serializeArray()로 데이터 추출하기

JavaScript 코드에서는 jQuery의 serializeArray() 메서드를 호출하여 폼 데이터를 배열 형태의 객체로 변환할 수 있습니다.

var data = $('form#form1').serializeArray(); // [{'demo': 'value'}]
$.ajax({
   data: data
});

serializeArray()는 폼 내부의 각 입력 요소를 순회하면서 {name: value} 구조의 객체 배열을 반환합니다. 위 예제에서는 [{'demo': 'value'}]와 같은 결과가 생성됩니다.

3. AJAX 요청에 데이터 전달하기

추출한 데이터는 그대로 $.ajax()의 data 옵션에 전달하여 서버로 전송할 수 있습니다. 이렇게 하면 별도의 가공 없이 폼 데이터를 백엔드로 깔끔하게 넘길 수 있습니다.

참고: serialize()와의 차이점

jQuery에는 유사한 메서드인 serialize()도 있습니다. 이 메서드는 데이터를 demo=value 형태의 URL 인코딩 문자열로 반환하는 반면, serializeArray()는 객체 배열을 반환하기 때문에 JavaScript에서 다루거나 JSON으로 변환하기에 더 적합합니다.