Graceful Light

jQuery serializeObject - form을 json으로 변환

2016-12-28


비동기 submit을 진행시에 form 값을 확인해보고 json object로 받아 한 번에 request를 날리고 싶을 때 유용하다.

소스

예제

1
var formData = $('#form').serializeObject();

여담

checkbox 같은 경우 여러 개 선택시 하나의 key에 배열로 반환된다.

1
2
3
4
5
6
7
8
9
<form>
<input type="checkbox" name="arr" value="1" checked/>
<input type="checkbox" name="arr" value="2" checked/>
</form>
<script>
var formData = $('form').serializeObject();
// => formData = { arr : [1,2] };
</script>

사실 이 기능이 제일 매력적이다.

현재 serializeObject library는 더 높은 버전이 있다.
최신 버전에선 form의 name속성에 object를 직접 관리할 수 있다.
최신 버전을 써도 괜찮고, 가볍게 추가해서 쓰고 싶으면 위 버전을 이용하자.

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요