수정된 값만 서버에 전송하기

ajax통신으로 서버에 요청을 보낼때는 특정 method를 사용합니다. 이번 포스트에서는 PUT, PATCH요청을 보낼때 특정 값이 변경되지 않았으면 보내지 않는 방법을 ‘쉽고’ ‘재사용’이 가능하도록 만들어보겠습니다.

기존의 값이 input에 저장되어있는 상황을 가정하에 기능을 구현해보겠습니다.

  1. 기존 데이터값을 저장해둔다.
  2. ‘수정’ 버튼을 누름과 동시에 값이 변경되었는지 점검.
  3. 변경되었으면 값을 넘겨줌.

이렇게 작동하도록 만들면 될거 같은데 흠…. 뭔가 예상치 못한 문제점이 있을 수도 있겠죠!

기존 데이터값 저장하기

먼저 input 태그에 onclick 이벤트를 걸어서 클릭할때마다 함수를 실행시킵니다.

<input type="text" id="title" onclick="saveValue(this);">

// 함수 코드
var saveValue = function(param) {
	// 실행
}

함수를 실행시키면 클릭한 input의 값을 저장하는 별도의 input을 생성합니다. 생성되는 input의 id값은 기존 input과 동일하게 만들되, 뒤에 특정 string을 달아줍니다. 저는 ‘_copy’를 달기로 했습니다.

var saveValue = function(param) {
	
	var prevVal = $(param).val(); // (1)
	var eId = $(param).attr('id'); // (2)
	
	if ($('#' + eId + '_copy').length > 0) { // (3)
	    return;
	} else { // (4)
	    $(param).parent().append('<input id="' + eId + '_copy" type="hidden" value="' + prevVal + '">');
	}
	
}
  1. input 값의 기존 value를 변수에 저장합니다.
  2. input의 id를 저장합니다.
  3. 기존 input의 title_copy 아이디를 가진 요소가 있을 경우 그냥 return, 아닐경우
  4. input의 형제 요소로 title_copy 아이디 값을 부여한 input에 prevVal을 저장합니다.

‘수정’ 버튼으로 값이 변경되었는지 확인하기

<button onclick="patchFunction()"></button>

수정 완료 버튼입니다. 클릭시 patchFunction 함수를 실행하게 되어있습니다. 아래의 코드에서 보면 patchFunction은 checkEdit함수를 통해서 현재 input에 적혀있는 값이 수정된 값인지 아닌지를 파악하게 되도록 만들었습니다.

var patchFunction = function() { 
	if (checkEdit("title")) { // (1)
		... // 수정한 값일 경우, 실행. 예: alert("수정된 값");
   }
}

var checkEdit = function (id) { // (2)
    var original = $("#" + id + "_copy").val(); // (3)
    var edited = $("#" + id).val(); // (4)
    
    if (original != undefined && original != edited) { // (5)
        return true;
    } else {
        return false;
    }
};
  1. 수정된 값인지 파악하는 함수를 실행합니다. 이때 string 값으로 아이디명을 넘겨줍니다.
  2. 아이디명을 받습니다.
  3. saveValue 함수에서 생성된 input의 값을 저장합니다. 이 값이 원본 값입니다.
  4. 현재 input에 있는 값을 저장합니다. 이 값은 수정된 값입니다.
  5. 원본 값이 없을경우, false를 반환합니다. 만약 원본 값과 수정 값이 일치하지 않는다면, true를 반환합니다. 원본 값과 수정 값이 일치한다면, false를 반환합니다.

끝

이 코드들을 좀 더 간단하게, 플러그인화 시켜서 사용할 수 있으면 좋겠네요. 조금 더 고민을 해봐야겠습니다.