[jQuery] Ajax json형태의 데이터값 동적 바인딩

비동기식 호출을 통해 json형태로 리턴받은 데이터를

따로 부여된 요소의 속성을 활용해 동적바인딩 하는 코드다.

json형태로 받은 데이터를 each메서드로 돌렸을 때

index에 keyValue가 넘어오는 것에 착안해 구현했음.

Ajax 호출 및 후처리 코드

$.ajax({

url: "String URLAddress",

data: {"data": String / Integer / Object / etc},

dataType: "json",

success: function(data){

$.each(data.vo, function(key, value){

$("jQuerySelector").find("input[name='" + key + "']").val(value);

$("jQuerySelector").find("element[name='" + key + "']").html(value);

});

}

});

… 반드시 데이터타입은 json으로 명시해준다.

… input요소에 value값으로 데이터를 바인딩하는 예.
… 기타 요소에 html값으로 바인딩하는 것도 가능하다.

분명히 단점은 존재한다. input에 name속성을 넣는건 아무런 문제가 없다고 치고

평범한 element요소에 name등의 속성을 넣으면 경고메시지를 보게된다.

코드가 짧지만, 짧은만큼 출력받은 데이터값을 단순히 바인딩하는 역할밖에 수행하지 못한다.

가져온 데이터를 2차가공해야한다든지, checkbox / radiobutton input요소와의 호환은 따로 처리해줘야함.

기타 자잘한 문제를 신경 쓸 필요가 없는 상황에서 요긴하게 쓰고있다.

예를 들어 데이터 수정 폼. SpringForm과 @SessionAttribute을 통해 Object단위의 데이터 역매핑을 편리하게 할 수 있지만,

이는 페이지 이동이 이루어지는 일반적인 웹페이지에 그 활용이 국한된다.

(혹시 모르겠다. Ajax리턴값으로 오는 값도 커맨드폼이 받을수있는지는)

페이지 이동을 최소화하고 모든 작업을 비동기로 처리하는

SPWA(Single Page Web Application) 형태의 작업에서 잘 쓰고있음. : )

Dream Archive