[JAVASCRIPT] 필요한 값만 추출하여 FORM 구조 만들기

AJAX를 사용하여 비동기 통신을 할 때,

일일히 데이터를 하나씩 명시해주는 것이 불편하여 데이터를 serialize 할 수 있도록,

FORM 구조를 만들어서 데이터를 전송하려고 공통 자바스크립트 페이지에 해당 함수를 생성했다.

 

paramCreateForm = function(obj){
    var form = document.createElement("form");
    
    for(key in obj){
        var param = document.createElement('input');
            param.setAttribute('type','hidden');
            param.setAttribute('name',key);
            param.setAttribute('value',obj[key]);
            form.appendChild(param);
    }
    
    return form;
}

paramCreateForm이라고 명시된 해당 함수는

obj를 파라미터 값으로 전달 받아서 obj에 들어있는 값을 토대로 FORM 구조를 만들어준다.

 

태그의 name 속성을 key로 사용하게 되고, 

해당 함수를 사용할 때는

var form = paramCreateForm(param);
        $.ajax({
            url : "/board/board_proc.ajax",
            type : "post",
            dataType : "json",
            data : $(form).serialize(),
            success:function(data){
                console.log(data);
                alert("정상처리되었습니다.");
                opener.location.reload();
                window.close();
            }
        })

이런 식으로 .serialize() 를 사용해주면 된다