비동기 submit 을 진행시에 form 값을 확인해보고 json object 로 받아 한 번에 request 를 날리고 싶을 때 유용하다.
소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$.fn.serializeObject = function () {
'use strict';
var result = {};
var extend = function (i, element) {
var node = result[element.name];
if ('undefined' !== typeof node && node !== null) {
if ($.isArray(node)) {
node.push(element.value);
} else {
result[element.name] = [node, element.value];
}
} else {
result[element.name] = element.value;
}
};
$.each(this.serializeArray(), extend);
return result;
};
|
예제
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();
</script>
|
사실 이 기능이 제일 매력적이다.
현재 serializeObject library는 더 높은 버전이 있다.
최신 버전에선 form 의 name 속성에 object 를 직접 관리할 수 있다.
최신 버전을 써도 괜찮고, 가볍게 추가해서 쓰고 싶으면 위 버전을 이용하자.