[Eclipse/Spring] ModelAndView를 이용한 페이지 이동 방법

최근 개발 세팅을 하면서 골머리 앓고 있던 문제가 있었다.

바로..AJAX 통신을 통한 페이지 이동처리

물론 내가 고집을 부리지 않았더라면 금방 해결됐을 문제였지만 어떻게든 해결해보고 싶었다.

 

먼저 내가 생각한 방식

//login.jsp

<form id="pageForm" method="post">
    <div class="pageDiv">
        <label for="userId">ID</label>
        <input type="text" id="userId" name="userId">
        <label for="userPw">PW</label>
        <input type="password" id="userPw" name="userPw">
        <button id="loginBtn" type="button">login</button>
    </div>
</form>

login 버튼을 클릭하면 

// login.js

gfn_ajax(options,
    /* ajax 성공 콜백 */
    function(response) {
        if(response.status == "success") {
            console.log("response : ", response);
        }
    },
    /* ajax 실패 콜백*/ 
    function(error) {
        console.log("error : ", error);
    }
);

login.js 의 위 로직을 통해 컨트롤러로 가게 된다. ajax 문법이 아닌 이유는 공통 로직으로 만들었기 때문에 일부는 공통 js 파일에 작성되어있다.

//LoginController.java

@RequestMapping("/main/userLogin")
public ModelAndView userLogin(@RequestParam Map<String, Object> paramMap, HttpServletRequest request, HttpServletResponse response) {
    ModelAndView mv = new ModelAndView();
    Boolean result = service.userLogin(paramMap);
    if(result) {
        mv.setViewName("/board/boardMain");
    }else {
        mv.setViewName("/");
        mv.addObject("login failed");
    }
    return mv;
}

컨트롤러로 넘어오게 되는데 ModelAndView 리턴형식으로 하고 싶었다. setViewName 여기에 경로를 쓰면 컨트롤러로 넘어간다는 설명을 읽고 시도해봤으나 넘어가긴 하지만 화면 상으로 403 redirect 에러가 발생했다. 

즉, ajax로는 화면 렌더링이 어려움! 

이걸 해결할 수 없을까 고민하다가 정착한 방법은 이거였다.

 

최종 방식

//login.jsp
<form id="pageForm" action="/main/userLogin" method="post">
    <div class="pageDiv">
        <label for="userId">ID</label>
        <input type="text" id="userId" name="userId">
        <label for="userPw">PW</label>
        <input type="password" id="userPw" name="userPw">
        <button id="loginBtn" type="submit">login</button>
    </div>
</form>

login.jsp 에서 수정된 점

- form 태그의 action 추가 컨트롤러 매핑 주소로 설정

//login.js
gfn_ajax(options,
    /* ajax 성공 콜백 */
    function(response) {
        if(response.status == "success") {
            window.location.href = response.result.redirectUrl;
        }
    },
    /* ajax 실패 콜백*/ 
    function(error) {
        console.log("error : ", error);
    }
);

reponse에서 window.location.href 로 이동하고자 하는 컨트롤러의 매핑 주소를 불러옴

 

//LoginController.java
@RequestMapping("/main/userLogin")
public ModelAndView userLogin(@RequestParam Map<String, Object> paramMap, HttpServletRequest request, HttpServletResponse response) {
    ModelAndView mv = new ModelAndView();
    Boolean result = service.userLogin(paramMap);
    if(result) {
        mv.setViewName("redirect:/board/boardMain");
    }else {
        mv.setViewName("redirect:/main/login");
        mv.addObject("login failed");
    }
    return mv;
}

 

동일하게 redirect:/(이동할 컨트롤러 매핑주소) 로 기재

이렇게 하면 다시 BoardController로 이동이 되고,

//BoardController.java

@RequestMapping("/boardMain")
public ModelAndView goHome() {
    ModelAndView mv = new ModelAndView();
    mv.setViewName("board/boardMain");
    return mv;
}

해당 메소드를 통해 화면이 전환이 된다. 

 

이렇게 최종하고 나니 편해졌다..

jsonView로 해야하는 건가하면서 고민도 많고 여러 방법을 시도했었는데 이번 일을 계기로 jsonView 는 어떻게 할때 사용이 되는건지 이해가 됐다.

지금은 slf4j와 logback을 이용한 로그 작성을 끝낸 상태! 하지만 아직 부족한 것 같아서 당장 해야하는 트랜잭션 공부 먼저 하고 좀 더 수정한 뒤에 올려보려고 한다.

다들 화이팅!