본문 바로가기
Java Web/Spring Boot

[Spring Boot] AJAX 통신 시 데이터를 통일된 방식으로 반환하기

by 스응 2023. 6. 1.
728x90
728x90

사전 준비

#  ResponseDto 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
@Data
@NoArgsConstructor
@AllArgsConstructor
@Builder
public class ResponseDto<T> {
 
    private int statusCode;
    private int code;
    private String message;
    private String resultCode;
    private T data;
    
}
cs

 

  - statusCode : HTTP 상태 코드 값

  - code : 성공 시 1, 실패 시 -1

  - resultCode : 성공 시 "success", 실패 시 "fail"

     → code 또는 resultCode를 사용해서 script단에서 if 문으로 코드를 나눌 수 있음

  - messge : alert 창에 사용할 메시지

  - data : 반환할 데이터

 

#  code, resultCode는 static 상수로 선언해서 사용

1
2
3
4
5
public final static String RESULT_CODE_SUCCESS = "success";
public final static String RESULT_CODE_FAIL = "fail";
    
public final static int CODE_SUCCESS = 1;
public final static int CODE_FAIL = -1;
cs

 

 

반응형
728x90

예시 코드

#  요청을 받은 Controller에서 데이터 반환

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    @PostMapping("/checkDate")
    @ResponseBody
    public ResponseDto<Boolean> checkDateProc(@RequestBody ScheduleDateCheckDto scheduleDto) {
        
        Integer statusCode = HttpStatus.OK.value();
        String message = "정상적인 선택입니다.";
        
        // code 또는 resultCode를 사용해서 script단에서 실행코드를 나눌 수 있음
        // 예시 : if (code == 1) { 성공 시 코드 } else if (code == -1) { 실패 시 코드 }
        int code = Define.CODE_SUCCESS;
        String resultCode = Define.RESULT_CODE_SUCCESS;
        Boolean data = false;
        
        ScheduleInfoResponseDto sch1 = scheduleService.readInfoDtoByScheduleId(scheduleDto.getScheduleId1());
        ScheduleInfoResponseDto sch2 = scheduleService.readInfoDtoByScheduleId(scheduleDto.getScheduleId2());
        
        // 스케줄1의 출발시간이 스케줄2의 출발시간보다 늦다면
        // 즉, 스케줄2가 스케줄1보다 먼저라면
        if (sch1.getDepartureDate().after(sch2.getDepartureDate())) {
            // 상태코드
            statusCode = HttpStatus.BAD_REQUEST.value();
            // alert 메시지로 사용함
            message = "첫 번째 여정과 두 번째 여정의 순서가 잘못되었습니다.\n다시 선택해주시길 바랍니다.";
            code = Define.CODE_FAIL;
            resultCode = Define.RESULT_CODE_FAIL;
            data = true;
            
        // 스케줄1의 도착시간이 스케줄2의 출발시간보다 늦다면
        // 즉, 스케줄1과 스케줄2의 운항시간이 겹친다면
        } else if (sch1.getArrivalDate().after(sch2.getDepartureDate())) {
            statusCode = HttpStatus.BAD_REQUEST.value();
            message = "첫 번째 여정과 두 번째 여정의 일정이 겹칩니다.\n다시 선택해주시길 바랍니다.";
            code = Define.CODE_FAIL;
            resultCode = Define.RESULT_CODE_FAIL;
            data = true;
        }
        
        return new ResponseDto<Boolean>(statusCode, code, message, resultCode, data);    
    }
cs

 

#  AJAX 통신을 실행한 script 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    if (type == 2) {
        
        let sch1Id = $("input[name=\"schedule1\"]:checked").val().split("_")[1];
        let sch2Id = $("input[name=\"schedule2\"]:checked").val().split("_")[1];
        
        let data = {
            scheduleId1: sch1Id,
            scheduleId2: sch2Id
        };
        
        let result = true;
        
        $.ajax({
            type: 'POST',
            url: '/ticket/checkDate',
            contentType: "application/json; charset=UTF-8",
            data: JSON.stringify(data),
            dataType: 'json',
            async: false   // 이거 해주니까 ajax 기다렸다가 아래에 return result 실행
        })
        .done((res) => {
            // 일정 선택에 문제가 있다면
            if (res.code == -1) {
                alert(res.message);
                result = false;
            }
        })
        .fail((error) => {
            console.log(error);
        });
        
        return result;            
    }
cs
320x100
반응형

댓글