Spring-Ajax Example(HashMap)

5/19 개발일기

Spring 과 Ajax 샘플을 만들어보았다. 로그인한 사용자가 마이페이지에서 회원 정보 수정을 할 때 "정보 수정"을 누르면 ajax를 통해 Controller와 데이터를 송수신한다. 

현재 사이트를 구축하며 대개 HashMap 형태로 데이터를 주고받고 있었기 때문에, Map<String,Object> 형태로 Request 데이터를 받고, 또 보낼 때 역시 Map<String,Object> 형태로 보내는 방안으로 구현해보았다.

1. Ajax 처리

Ajax에서는 json 타입으로 데이터를 보낸다. 그런데 Controller에서는 Map<String, Object>로 받고 싶다. 그렇다면 어떻게 해야할까? 답은 간단하다. 보낼때 Map<String,Object> 형식으로 셋팅을 해주면 된다.

Ajax

$('#changeSubmitBtn').click(function(e){
    var data = {}
    data["name"] = $('#name').val();
    data["tel"] = $('#tel').val();
    data["email"] = $('#email').val();
    var birth = $('#birth').val();
    data["birth"] = birth.replace(/-/g,''); // 2015-09-24 => 20150924 로 변경

    $.ajax({
        contentType:'application/json',
        dataType:'json',
        data:JSON.stringify(data),
        url:'/mypage/updateUser',
        type:'POST',
        success:function(response){
                alert(response.message);
            },
        error:function(request,status,error){
                alert(response.message);
            }
        });
});

먼저 data를 생성하여, <String,Object> 형식으로 데이터를 넣어준다.

data["name"] = $('#name').val();  이 그러한 형식이다.

나는 넣을게 별로 없어서 다 일일이 기술해주었지만,

넣을게 너무 많아 넘치게 되면 for문을 이용하는 방법도 고려할 만 하다.

그리고 ajax에서 보낼 때  data:JSON.stringify(data) 라고 작성한다.

우리가 선언한 var data는 javascript 변수인데, ajax에서는 json 형태로 데이터를 반환하므로,

javascript 값을 json 형태로 파싱해야 한다.

그리고 .stringify 는 Javascript 값을 json 으로 파싱해주는 메소드다.

2. Controller 처리

Controller

    @RequestMapping(value="/mypage/updateUser", method=RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> updateUserInfo(@RequestBody Map<String, Object> params){        
        Map<String, Object> resultMap = new HashMap<String,Object>();        
        try{
            userService.updateUserInfo(params);            
        }catch(Exception e){
            resultMap.put("message",e.getMessage());
            return resultMap;
        }        
        resultMap.put("message", "회원 정보가 정상적으로 변경되었습니다");
        return resultMap;
    }

Controller에서는 해당 메소드 위에 @ResponseBody 를 입력해준다. return 값을 HTTP Response Body 로 전달하라는 뜻이다. ajax 역시 HTTP Request Body 를 통해 파라미터를 전달하므로 파라미터 앞에 @RequestBody 를 명시해준다. 그리고 아래 로직은 다른 컨트롤러와 동일하다. 파라미터를 Service로 전달하고, 다시 DAO로 전달하기. 그러면 끝 :-)