jQuery 폼(form) 으로 JSON 데이터 생성

jQuery 를 이용해 form에 입력된 데이터를 JSON으로 생성하는 방법을 소개합니다.

1. JSON 데이터를 생성할 예시 form

?

1 2 3 4

<form id="exampleForm" <="" p=""> ID : <input type="text" name="id"> PW : <input type="password" name="pw"> </form>

2. form -> JSON 데이터 생성

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var arrayData = $('#exampleForm').serializeArray();   var json = {};   $.each (arrayData, function (i, e) {     if (json[e.name]) {         if (!json[e.name].push) {             json[e.name] = [json[e.name]];         }         json[e.name].push(e.value || '');     } else {         json[e.name] = e.value || '';     } });   // JSON 데이터 사용 $.ajax({     url: '/request/...'     method: 'POST',     data: o,     ... });

serializeArray() 함수는 jQuery에서 기본적으로 제공되는 함수로 지정한 폼을 [{name, value}] 형태의 배열로 변경합니다. 이후 해당 배열을 이용하여 javascript object에 담아 JSON형태 데이터를 만들수있습니다.