[jQuery] Ajax 데이터 <-> Spring 컨트롤러 주고받기

Ajax파라미터 통신

jquery ajax 통신

 

프론트에서 보내는 방법은 아래와 같이 여러가지가 있다.
data : JSON.stringify({emailAdres:$("#emailAdres").val()})
data : {emailAdres:$("#emailAdres").val(), userId:$("#userId").val()}
url : "/login/findid_check?emailAdres="+$("#emailAdres").val()

 

백엔드에서 받는 방법은 아래와 같이 여러가지가 있다.
@RequestBody Map<String, Object> paramMap
@RequestParam("emailAdres") String emailAdres
@RequestParam Map<String, Object> paramMap
@ModelAttribute("userVO") UserVO userVO

 

 

1. Ajax통신 예제 (Json으로 변환해서전달)

• 프론트엔드
• data를 json형태로 백엔드에 전송할경우 백엔드는 @RequestBody를 사용해서 받는다.
• @RequestBody는 Map이되는 VO가되는 상관없다.
• return 의경우 @ResponseBody 를 선언해야 오류없이 프론트로 전달된다.

//아래처럼 기본적인 Ajax구조로 처리할수있다.

$.ajax({
    type : 'POST',
    url  : "/login/findid_check",
    data : JSON.stringify({emailAdres:$("#emailAdres").val()})
    async : false,
    contentType : "application/json",
    dataType : "json",
    beforeSend : function(xhr){
        console.log('실행전 처리영역');
    },
    success:function(data, textStatus){
        if(data.result == "SUCCESS"){
            console.log("성공");     
        }else if(data.result == "FAIL"){
            console.log("실패");
        }else{
            console.log("에러");
        }
    },error:function(r,s,e){
        console.log(e);
    }
});


//다른방식의 Ajax구조로도 처리가능하다.
$.ajax({
    type : 'POST',
    url  : "/login/findid_check",
    data : JSON.stringify({emailAdres:$("#emailAdres").val()})
    async : false,
    contentType : "application/json",
    dataType : "json",
}).done(function(data) {
    if(data.result == "SUCCESS"){
        console.log("성공");     
    }else if(data.result == "FAIL"){
        console.log("실패");
    }else{
        console.log("에러");
    }		
}).fail(function (jqXHR, textStatus, errorThrown) {
    //
});

• 백엔드
• (@RequestBody Map<String, Object> paramMap 형식으로 백엔드에서 받는다.

@RequestMapping(value="/login/findid_check", method={RequestMethod.POST})
@ResponseBody
public Map<String, Object> findIdCheck(@RequestBody Map<String, Object> paramMap
    , HttpServletRequest request, HttpServletResponse response) throws Exception{
		
    Map<String,Object> result = new HashMap<String,Object>();
		
    try{
        int resultCount = loginService.findIdCheck(paramMap);
        if(resultCount > 0) {
            result.put("result", "SUCCESS");
        } else {
            result.put("result", "FAIL");
        }
    } catch (Exception e) {
        result.put("result", "ERROR");
        throw new ProcessingException(e.getMessage(), ErrorCode.UNKNOWN_ERROR);
    } 
    return result;	
}

 

 

2. Ajax통신 예제 (파라미터로 전달)

• 프론트엔드
• data를 URL에 파라미터로 보낼경우

$.ajax({
    type : 'GET',
    url  : "/login/findid_check?emailAdres="+$("#emailAdres").val(),    
    async : false,
    contentType : "application/json",
    dataType : "json",
    beforeSend : function(xhr){
        console.log('실행전 처리영역');
    },
    success:function(data, textStatus){
        if(data.result == "SUCCESS"){
            console.log("성공");     
        }else if(data.result == "FAIL"){
            console.log("실패");
        }else{
            console.log("에러");
        }
    },error:function(r,s,e){
        console.log(e);
    }
});

• 백엔드
• @RequestParam("emailAdres") String emailAdres  형식으로 백엔드에서 받는다.

@RequestMapping(value="/login/findid_check", method={RequestMethod.POST, RequestMethod.GET})
@ResponseBody
public Map<String, Object> findIdCheck(@RequestParam("emailAdres") String emailAdres
    , HttpServletRequest request, HttpServletResponse response) throws Exception{
		
    Map<String,Object> result = new HashMap<String,Object>();
		
    try{
        int resultCount = loginService.findIdCheck(emailAdres);
        if(resultCount > 0) {
            result.put("result", "SUCCESS");
        } else {
            result.put("result", "FAIL");
        }
    } catch (Exception e) {
        result.put("result", "ERROR");
        throw new ProcessingException(e.getMessage(), ErrorCode.UNKNOWN_ERROR);
    } 
    return result;	
}

 

 

3. Ajax통신 예제 (또다른 json형태로 전송)

• 프론트엔드
• data를 아래와 같이 보낸다.

$.ajax({
    type : 'POST',
    url  : "/login/findid_check",    
    data : {emailAdres:$("#emailAdres").val(), userId:$("#userId").val()},
    async : false,
    contentType : "application/json",
    dataType : "json",
    beforeSend : function(xhr){
        console.log('실행전 처리영역');
    },
    success:function(data, textStatus){
        if(data.result == "SUCCESS"){
            console.log("성공");     
        }else if(data.result == "FAIL"){
            console.log("실패");
        }else{
            console.log("에러");
        }
    },error:function(r,s,e){
        console.log(e);
    }
});

• 백엔드
• @RequestParam Map<String, Object> paramMap 형식으로 백엔드에서 받는다.

@RequestMapping(value="/login/findid_check", method={RequestMethod.POST, RequestMethod.GET})
@ResponseBody
public Map<String, Object> findIdCheck(@RequestParam Map<String, Object> paramMap
    , HttpServletRequest request, HttpServletResponse response) throws Exception{
		
    Map<String,Object> result = new HashMap<String,Object>();
		
    try{
        int resultCount = loginService.findIdCheck(paramMap);
        if(resultCount > 0) {
            result.put("result", "SUCCESS");
        } else {
            result.put("result", "FAIL");
        }
    } catch (Exception e) {
        result.put("result", "ERROR");
        throw new ProcessingException(e.getMessage(), ErrorCode.UNKNOWN_ERROR);
    } 
    return result;	
}

 

 

※.기타

• ajax구조에 swal메시지 플러그인과 spring:message 등의 여러가지 기능을 추가하여 사용할수 있다.

ajax spring 데이터전송