Spring MVC를 사용하여 Ajax 요청

BACKEND/스프링 Spring

Spring MVC를 사용하여 Ajax 요청

꾸준히개발하자 2024. 1. 14. 21:38

JavaScript에서의 Ajax 요청:

HTML 페이지에서 Ajax를 사용하여 데이터를 비동기적으로 서버에 요청하고 응답을 받는 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Ajax Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myButton").click(function(){
                $.ajax({
                    url: '/getData',
                    type: 'GET',
                    success: function(response){
                        $("#result").text(response);
                    },
                    error: function(error){
                        console.log(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="myButton">Fetch Data</button>
    <div id="result"></div>
</body>
</html>

Spring Controller에서의 Ajax 처리:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class AjaxController {

    @GetMapping("/getData")
    public String getData() {
        // 여기에서 데이터를 처리하고 결과를 반환합니다.
        return "Hello from server";
    }
}

이 코드는 클라이언트가 버튼을 클릭하면, 서버의 /getData 경로로 GET 요청을 보내고, 서버에서는 간단한 문자열 메시지를 응답으로 보냅니다. 실제 응용 프로그램에서는 이 부분에서 데이터베이스 조회, 비즈니스 로직 처리 등을 수행할 수 있습니다.

이러한 방식으로 Spring에서 Ajax를 사용하여 비동기적인 웹 애플리케이션을 구축할 수 있습니다.

저작자표시