[js] serialize(), serializeArray() 이용해 form값 한번에 가져오기

serialize(), serializeArray() 이용해 form값 한번에 가져올 수 있다.

form값을 이용할 때 유용한 함수이다.

 

serialize()
form 객체들을 표준 URL인코딩 표기법으로 텍스트 문자열 생성

- form(폼) 객체들을 한번에 받기 

- 표준 URL인코딩 표기법으로 텍스트 문자열 생성

- name속성(attribute) 가 무조건 있어야한다.

- 체크박스(checkbox)와 라디오(radio)은 체크 된 경우만 포함

- file의 첨부파일 데이터는 직렬화X

- 폼 객체들을 나열함

 

[ 예시 ] 

<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Hong">
  <input type="hidden" name="it" value="web">
  <input type="hidden" name="lang" value="java"> 
  <input type="hidden" name="age" value="2023">
</form>
<div name="resultDiv" id="resultDiv">
  
</div>


//javaScript + jQuery
var serialize = $('#dataForm').serialize();
// id가 dataForm인 form의 내부 값을 직렬화 처리한다.

$('#resultDiv').html(serialize);

==================
결과값 : name=Hong&it=web&lang=java&age=2023

 

serializeArray()
form 요소들(input, textarea, select)을 이름을 key로, 값을 value로 하는 배열로 인코딩

- form(폼) 객체들을 한번에 받기 

- name 와 value 형태로 담아서 인코딩

- JSON 문자열로 인코딩할 준비가 된 객체의 JavaScript 배열을 만듦

- name attribute의 값이 반드시 있어야함

- value 값이 없는 element는 value가 빈(empty)스트링의 형태로 할당

- type이 submit 인 경우는 value가 있어도 (serialized) 대상에 해당되지 않음

- name이 배열인 경우  ex. <input name='fruits[]'.../> ,'fruits[]' 자체를 string으로 인식

 

[ 예제 ]

 

[html]
<form name="dataForm" id="dataForm">
  <input type="hidden" name="name" value="Hong">
  <input type="hidden" name="it" value="web">
  <input type="hidden" name="lang" value="java"> 
  <input type="hidden" name="age" value="2023">
</form>

<div name="resultDiv" id="resultDiv">
  
</div>

[js]
var serializeArray = $('#dataForm').serializeArray();

$('#resultDiv').html(JSON.stringify(serializeArray));

 

[ form 데이터를 JSON으로 변환함수 예제 ]

// form data를 JSON으로 변환한다
// ex) getFormToObject($('#saveForm'));
// 두번째 인자로 문자열을 보낼 경우 해당 문자를 이름에서 제거한다
// (레이어 팝업을 사용하는 경우 getFormToObject($('#savePopForm'), '_pop')); 과 같은 형태로 사용);
var getFormToObject = function (form, removeString) {
    var param = {};
    var list = $(form).serializeArray();
    for (var i = 0; i < list.length; i++) {
        var obj = list[i];
        if (obj.value !== null) {

            var name;
            //두번째 인자로 문자열을 보낼 경우 해당 문자를 이름에서 제거
            if (removeString) {
                name = obj.name.replace(removeString, '');
            } else {
                name = obj.name;
            }
            // date의 경우 . 제거
            if (obj.name.toLowerCase().indexOf('date') > -1) {
                obj.value = obj.value.replace(/\./gi, '');
            }

            param[name] = obj.value;
        }
    }
    return param;
};

serializeArray()함수를 잘 사용하면 ajax를 사용할 때 편하게 사용할 수 있는 것 같다.