JavaScript 공통 함수 정리(data to other data, dynamic events, Jquery-ajax)

다양하게 자주쓰인 JavaScript 공통 유틸리티 함수를 정리하였습니다. (지속적으로 업데이트 합니다 !!)

 

Form to Json

$.fn.serializeObject = function(){
   var obj = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (obj[this.name]) {
           if (!obj[this.name].push) {
        	   obj[this.name] = [obj[this.name]];
           }
           obj[this.name].push(this.value || '');
       } else {
    	   obj[this.name] = this.value || '';
       }
   });
   return obj;
};

let jsonData = {};
jsonData["form"] = $('form[name="pageForm"]').serializeObject();

JSON.stringify(jsonData);

form 데이터를 Json 데이터로 변환한다.

 

 

동적 이벤트 생성

const EVENT_LIST = {
    addActionEvent : function(id, event, callback){
        let obj = document.getElementById(id);
        // click event !!
        if(event == "cellClick"){
            return obj.addEventListener('click', (e) => callback(e));
        }
    }
};


// 활용
EVENT_LIST.addActionEvent("id", "cellClick", function(e){
    let obj = e.target;
    let eventData = {
        rowIndex : obj.dataset.index,
        value : obj.innerHTML
    };
});

동적으로 클릭 이벤트를 추가합니다. (예시 CELL 클릭시 event 동적 추가)

 

 

Jquery Ajax 공통 생성

const errorMsg = "통신 오류";

function ajaxPostCall(url, params, callback){
    $.ajax({
        url: url,
        type: "POST",
        dataType: "JSON",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(params),
        //async: false,
        success: function(data) {
            data.result = 1
            return callback(data);
        },
        error: function(error) {
            error.result = 0
            error.msg = errorMsg;
            return callback(error);
        },
    });
}

function ajaxGetCall(url, params, callback){
    let getUrl = url + "?";
    let keys = Object.keys(params);
    for(let i = 0; i < keys.length; i++) {
        let key = keys[i];
        getUrl += key + "=" + params[key];
        if(!(i == (keys.length - 1))){
            getUrl += "&";
        }
    }

    $.ajax({
        url: getUrl,
        type: "GET",
        dataType: "JSON",
        contentType: "application/json; charset=utf-8",
        success: function(data) {
            data.result = 1
            return callback(data);
        },
        error: function(error) {
            error.result = 0
            error.msg = errorMsg;
            return callback(error);
        },
    });
}

function ajaxMultiPartCall(url, params, callback){
    $.ajax({
        url: url,
        type: "POST",
        enctype:'multipart/form-data',
        processData: false,
        contentType: false,
        data: JSON.stringify(params),
        //async: false,
        success: function(data) {
            return callback(data);
        },
        error: function(error) {
            return callback(error);
        },
    });
}


// 활용
ajaxPostCall("url", {data:"data"}, function(response){
    console.log(response);
});

POST, GET, Multipart 형식의 공통 ajax 호출 함수

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

감사합니다.