[jQuery] serializeObject

참고 :  https://hermeslog.tistory.com/365 [헤르메스 LIFE]

jquery 에서 form serialize를 이용하여 json 을 만들수 있습니다.

먼저 serialize 에 대해서 간단히 설명하겠습니다.

 

serialize 함수는 2개가 있습니다.

 

첫번째로 serialize() 입니다.

 

URL-encoded 표기법으로 form 의 객체들을 텍스트화 하고 그 결과를 return 합니다.

형식은 inputName=inputValue&inputName2=inputValue2 입니다.

 

두번쨰로 serializeArray() 입니다.

 

Json 문자열 형태의 배열을 return 합니다.

 

형식은 [{name:"name",valeu:"valeu"},{name:"name2",value:"value2"}] 입니다.

 

 

지금 만들 형식은 { inputName:"inputVlaue", inputName2:"inputValue2" } 와 같은 Json 형태입니다.

var ajaxRequest;
(function( $, window ){
    $.fn.serializeObject = function() {
        var obj = null;
        
        try {
            // this[0].tagName이 form tag일 경우
            if(this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) {
                var arr = this.serializeArray();
                if(arr){
                    obj = {};
                    jQuery.each(arr, function() {
                        // obj의 key값은 arr의 name, obj의 value는 value값
                        obj[this.name] = this.value;
                    });
                }
            }
        } catch(e) {
            alert(e.message);
        } finally {}
        
        return obj;
    };
})( jQuery, window );

/**
 * jqGrid
 * desc   : form의 데이터를  json 형태로 변환해 준다.
 * return : 성공시에는 객체((JSON)을 리턴한다. 실패시에는 null을 리턴한다.
 */
jQuery.fn.serializeObject = function() {
    var obj = null;
    try {
        if ( this[0].tagName && this[0].tagName.toUpperCase() == "FORM" ) {
            var arr = this.serializeArray();
            if ( arr ) {
                obj = {};
                jQuery.each(arr, function() {
                    obj[this.name] = this.value;
                });            
            }//if ( arr ) {
        }
    }
    catch(e) {alert(e.message);}
    finally  {}
     
    return obj;
};

/**
 * Page Onload
 * window.load() 보다 더 빠르게 실행
 */
$(document).ready(function() {
    var conditions = $('#searchForm').serializeObject();
    alert(conditions);
});

-----------------------------------------------------------------------------------------------

Json으로 생성된 객체를 String으로 보여주는 객체.

alert((JSON.stringify(JsonUtil.serializeForm()));

var JsonUtil = {
  /**
   * 해당 form 의 element 를 map 데이터로 구성하여 리턴
   * @param formName    : 데이터를 구성할 form name
   * @return
   */
  serializeForm : function (formName)
  {
    return $( "form[name='"+formName+"']" ).serializeObject();
  }
};