JS & Ajax 통신

Ajax

var formData = $("#loginForm").serialize();

    $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        url: "/login/start",
        data: formData,
        dataType: "json",
        async : false,
        success: function (result) {
            switch(result.status){
                case "success" : location.href="dashboard"; break;
                case "pw_check" :
                    showModal("alertModal" ,"비밀번호를 확인 하세요.\n\n5/" + result.trial + " 회 실패.");
                    break;
                case "trial_fail" :
                    showModal("alertModal" ,"시도횟수를 초과 하였습니다. 비밀번호 찾기를 이용하세요.");
                    break;
                case "no_user" :
                    showModal("alertModal" ,"존재하지 않는 사용자 입니다.");
                    break;
                default :
                    showModal("alertModal",result.status);
                    break;
            }
        },
        error: function () {
            showModal("alertModal" ,"페이지에 에러가 있습니다!");
        }
    });

 

1. return dataType: "json"

@ResponseBody
@RequestMapping("/login/start")
public Map<String, Object> login(HttpSession session , @ModelAttribute("userVO") UserDTO userDTO ) throws Exception {

    Map<String, Object> resultMap = new HashMap<>();
    try{
        resultMap.put("status", "success");
    }catch(Exception e){
        resultMap.put("status",e.getMessage());
        return resultMap;
    }
    return resultMap;
}

 

 

2. return dataType: "Text"

@ResponseBody
@PostMapping("/login/changePw")
public String changePw() {

    return "String...";
}

 

3. get 방식 data Send

$('.btnGrant').on('click', function() { 
    const it_user_nm   = $(this).closest("tr").find("#chk_user_nm").val();
    submitFlag = true;
    location.href = "/basic/auth_modify?it_user_nm=" + it_user_nm;
});


@GetMapping("/auth_modify")
public ModelAndView userAuthModifyPage(HttpSession session ,  HttpServletRequest request ) throws Exception{
    mv.addObject("it_user_nm",request.getParameter("it_user_nm"));
    mv.setViewName("/basic/auth_modify");
    return mv;
}

 

3. 주의 !

ajax 통신하려면 ModelAndView를 return 하면 안된다.
특정 Object.. (VO나 DTO등) 혹은 HashMap 같은걸 return 해야 한다.

@ResponseBody를 붙여주면 스프링이 JSON으로 변경해서 보내줍니다.