티스토리 뷰

SCIT/8월

8/8 [Ajax] Test1(2)

Seraphim_ 2024. 8. 8. 17:20

1. @ResponsBody

Java의 Spring 프레임워크에서 사용되는 어노테이션(annotation).

주로 웹 애플리케이션에서 HTTP 응답의 바디(body)에 데이터를 직접 써주는 역할.

Spring MVC에서 이 애노테이션은 컨트롤러 메서드가 반환하는 값을 HTTP 응답 본문으로 변환하여

클라이언트에게 전송할 때 사용

 

  1) 기능

  • 데이터 직렬화 및 반환: @ResponseBody는 컨트롤러 메서드가 반환하는 Java 객체를 JSON, XML 등의 형식으로 직렬화하여 HTTP 응답 본문에 포함
  • 뷰를 반환하지 않음: @ResponseBody가 사용된 메서드는 뷰 이름을 반환하지 않고, 대신 데이터를 직접 반환합니다. 이는 RESTful 웹 서비스와 같은 API를 구현할 때 유용

 

2. ResponseEntity<?>

스프링 프레임워크에서 HTTP 요청에 대한 응답을 나타내는 클래스

응답의 상태 코드, 헤더, 본문을 포함할 수 있으며, 이를 통해 클라이언트에 보다 세밀한 응답을 제공한다.

  1) 기능

  • 상태 코드 설정: 응답의 HTTP 상태 코드를 설정할 수 있습니다.
  • 헤더 설정: 응답에 HTTP 헤더를 추가할 수 있습니다.
  • 본문 설정: 응답의 본문을 설정할 수 있습니다.

 

※ Java API : 상속관계 확인 可 (ex. RuntimeException)

java API

 

3. HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Test 1</title>
    <link rel="stylesheet" th:href="@{/static/css/styles.css}">
    <script th:src="@{/static/jq/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/static/js/test1JS.js}"></script>
</head>
<body>
<div class="container">
    <header>
        <h1>[ Ajax Test 1 ]</h1>
    </header>
    <main>
        <div id="content" class="content">
            <!-- AJAX 로드된 데이터가 아래에 표시됩니다. -->
            <p><a href="javascript:test1()">서버로 요청보내기</a></p>
            <p><a href="javascript:test2()">서버로 문자열 보내기</a></p>
            <p><a href="javascript:test3()">서버에서 문자열 받기</a></p>
            <hr>
            <p><a href="javascript:test4()">값 전달하여 계산하기 1</a></p>
            <p><a href="javascript:test5()">값 전달하여 계산하기 2</a></p>
            <p>
            <!-- ID가 num1, num2인 입력란에 숫자를 입력하고, javascript로 읽어서 서버로 ajax요청을 보냄.
                 컨트롤러에서 정수 2개를 전달받아 더하기 한 수 계산결과를 리턴. 리턴받은 결과를 ID가 num3인
                 입력란에 넣어서 보여줌 -->
                <input type="text" id="num1"> ① : + / ② : ÷
                <input type="text" id="num2">=
                <input type="text" id="num3">
            </p>
            <hr>
        </div>
    </main>
    <footer>
        <p>&copy; 2024.08 AJAX Practice</p>
    </footer>
</div>
</body>
</html>

 

4. Ajax

function test1() {
    alert('test1() 함수 실행됨');
    // 해당 html에서 떠나지 않고, 코드들을 실행할 수 있는게 Ajax
    // 서버로 비동기적인 요청.
    // 비동기란?
    // 동기는 앞에 작업이 끝나야 그 다음 작업으로 넘어가는데, 중간에 함수 호출처럼 코드가 있어도, 호출한 함수가 돌아올 때까지 그냥 기다리는
    // 것이 아니라, 그 다음 일을 진행하는 것(간단히 말해 코드가 멀티태스킹이 가능한 것)
    $.ajax({
        // ↓ 요청 경로 (http://localhost:7777/ajaxtest1)
        url : 'ajaxtest1',
        // ↓ 요청 방식
        type : 'get',
        success : function () {
            // 함수부분
            alert('success');
        },
        error : function () {
            // 함수부분
            alert('error');
        }
    });
    alert('test() 함수의 뒷부분' )
}

function test2() {
    alert('test2() 함수 실행됨');
    $.ajax({
        // 요구사항 : 서버의 'ajaxtest2' 경로로 post 요청을 보냄. 문자열을 파라미터로
        // ↓ 요청 경로 (http://localhost:7777/ajaxtest2) - 목적지
        url : "ajaxtest2",
        // ↓ 요청 방식
        type : "post",
        // ↓ 파라미터 전달( str : 파라미터 이름 )
        data : { str : '클라이언트에서 보냄'},
        success : function () {
            console.log("성공"); // → concole 출력문 : 성공
        },
        error : function () {
            console.log("에러");
        }
    });
    alert("test2() 함수의 뒷 부분")
}

function test3() {
    alert('test3() 함수 실행됨');
    $.ajax({
        // ↓ 요청 경로 (http://localhost:7777/ajaxtest3)
        url : 'ajaxtest3',
        // ↓ 요청 방식
        type : 'get',
        // ↓ str : 매개변수 선언
        success : function (str) {
            // 함수부분
            console.log("성공", str); // → concole 출력문 : 성공 문자열
        },
        error : function () {
            // 함수부분
            console.log("에러");
        }
    });
    alert('test3() 함수의 뒷부분' )
}

function test4() {
    alert('test4() 함수 실행됨');
    $.ajax({
        // ↓ 요청 경로 (http://localhost:7777/ajaxtest4)
        url : 'ajaxtest4',
        // ↓ 요청 방식
        type : 'post',
        data : { num1 : $('#num1').val(), num2 : $('#num2').val()},
        dataType : 'text', // → 문자열로 받기. 만약, 객체로 받으려면 'json'
        success : function (num3) {
            // 함수부분
            alert('성공', num3);
            $('#num3').val(num3)
        },
        error : function () {
            // 함수부분
            alert('에러');
        }
    });
    alert('test4() 함수의 뒷부분' )
}

function test5() {
    alert('test5() 함수 실행됨');
    $.ajax({
        url : 'ajaxtest5',
        // ↓ 요청 방식
        type : 'post',
        data : { num1 : $('#num1').val(), num2 : $('#num2').val()},
        dataType : 'text',
        success : function (a) {
            // 함수부분
            alert('성공', a);
            $('#num3').val(a)
        },
        error : function (e) {
            // 함수부분
            alert('에러');
            console.log('계산 실패');
            console.log(e);
            console.log(JSON.stringify(e));
            // ↑ 한덩어리의 문자열로 보여줌 // 정상적인 코드는 status : 200
            // 비정상적 코드 예 : 404(경로문제), 405(getset문제), 400(입력문제), 500(코드오타문제)

        }
    });
    alert('test5() 함수의 뒷부분' )
}

 

5. Controller

    // 서버로 문자열 보내기
    @ResponseBody
    @PostMapping("ajaxtest2")
    public void ajaxtest2(@RequestParam("str") String s) {
        log.debug("전달된 값 : {}", s);
    }

    // 서버에서 문자열 받기
    @ResponseBody
    @GetMapping("ajaxtest3")
    // ↓ String 타입 : 여기선 달랑 "문자열"이라는 문자만 보내갰다는 뜻
    public String ajaxtest3() {
        String s = "문자열";
        log.debug("서버에서 보낸 값 : {}", s);
        // ↓ 문자열 달랑 하나만 보낸 것. Ajax함수의 'success'부분으로 돌아감
        return s;
    }

    // 값 전달하여 계산하기 1
    @ResponseBody
    @PostMapping("ajaxtest4")
    // ↓ String 타입 : 여기선 달랑 "문자열"이라는 문자만 보내갰다는 뜻
    public int ajaxtest4(@RequestParam("num1") int num1, @RequestParam("num2") int num2) {
        log.debug("서버에서 보낸 값 : num1={}, num2={}", num1, num2);
        // ↓ 문자열 달랑 하나만 보낸 것. Ajax함수의 'success'부분으로 돌아감
        num1 += num2;
        return num1;
    }

    // Exception 복습
    // IOException : 예외처리 필수. 안하면 컴파일 에러
    // RuntimeException : 예외처리 선택

    // try catch문
    // catch문 작성시, 하위 클래스부터 세부적으로 catch 처리를 해야함
    // java API 참고

    // ResponseEntity<> 데이터 타입 : Spring에서 제공하는 데이터 타입
    // 리턴타입이 int타입이거나 String타입 등 타입이 정해져 있지 않을 때 사용

    // 값 전달하여 계산하기 2
    @ResponseBody
    @PostMapping("ajaxtest5")
    // ↓ String 타입 : 여기선 달랑 "문자열"이라는 문자만 보내갰다는 뜻
    public ResponseEntity<?> ajaxtest5(@RequestParam("num1") String num1, @RequestParam("num2") String num2) {
        try {
            // ↓ 스트링을 인트로 변환
            int n1 = Integer.parseInt(num1);
            int n2 = Integer.parseInt(num2);
            int n3 = n1 / n2;
            // ↓ 정상적인 처리
            return ResponseEntity.ok(n3); // 정상적일 때, 본문에 값을 보내주는 코드
        } catch (NumberFormatException e) {
            e.printStackTrace(); // 오류 확인용
            // ↓ 정수타입이 아닌 경우
            return ResponseEntity.badRequest().body("정수가 아닙니다.");
        } catch (ArithmeticException e) {
            e.printStackTrace(); // 오류 확인용
            // ↓ 0으로 나눴을 경우
            return ResponseEntity.badRequest().body("0으로 나눌 수 없습니다.");
        } catch (Exception e) {
            e.printStackTrace(); // 오류 확인용
            // ↓ 기타 오류
            return ResponseEntity.badRequest().body("계산에 실패했습니다.");
        }
    }

 

'SCIT > 8월' 카테고리의 다른 글

8/12 [Ajax] Test2. 서버로부터 객체 주고 받기  (0) 2024.08.12
8/9 Spring Test. 성적 입력  (0) 2024.08.12
8/7 [Ajax] Test1(1)  (0) 2024.08.07
8/7 [게시판] 게시글 첨부파일 다운로드  (0) 2024.08.07
8.6[게시판] 파일 첨부 및 삭제 기능 추가  (0) 2024.08.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
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
글 보관함