Thymeleaf로 Ajax요청보내기

Backend/Thymeleaf

Thymeleaf로 Ajax요청보내기

Chung-A 2023. 11. 2. 08:00

Spring Thymeleaf를 사용하여 AJAX 요청을 보내는 방법에 대해 적어보려고 합니다.

의존성 추가

먼저 spring-web과 thymeleaf 의존성을 프로젝트에 추가해야 합니다. Maven을 사용한다면 다음과 같이 의존성을 추가하세요

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. Thymeleaf 페이지 생성

이 부분에서는 Thymeleaf를 사용하여 AJAX 요청을 보낼 페이지를 생성하는 방법을 설명하겠습니다. 이 페이지를 통해 사용자가 AJAX 요청을 시작할 수 있습니다.

먼저, 프로젝트의 src/main/resources/templates 폴더 (또는 해당하는 Thymeleaf 템플릿 폴더) 내에 Thymeleaf 템플릿 파일을 생성합니다. 이 파일을 "ajax-example.html"이라고 가정하겠습니다.

아래는 "ajax-example.html"의 예시 코드입니다

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>AJAX 예제 페이지</title>
</head>
<body>
    <h1>Thymeleaf AJAX 예제 페이지</h1>
    
    <button id="ajaxButton">AJAX 요청 보내기</button>
    
    <div id="resultDiv">요청 결과: </div>
    
    <!-- AJAX 요청을 처리할 JavaScript 코드 -->
    <script th:inline="javascript">
        $(document).ready(function() {
            $('#ajaxButton').click(function() {
                // AJAX 요청을 이곳에서 처리
            });
        });
    </script>
</body>
</html>

3. 컨트롤러 생성

Spring 컨트롤러를 만들어 AJAX 요청을 처리할 경로를 작성합니다.

예를 들어, 다음과 같이 메서드를 생성합니다

@Controller
public class AjaxController {
    @GetMapping("/ajax-example")
    public String ajaxExample(Model model) {
        return "ajax-example";
    }
}

4. AJAX 요청 처리

Thymeleaf 페이지 내에서 AJAX 요청을 처리할 JavaScript를 작성합니다.

아래는 그 예시입니다.

<!-- ajax-example.html -->
<script th:inline="javascript">
    $(document).ready(function() {
        $('#ajaxButton').click(function() {
            $.ajax({
                url: '/your-ajax-endpoint', // 실제 AJAX 요청을 처리할 엔드포인트
                type: 'GET', // 또는 'POST', 요청 유형에 따라 설정
                success: function(response) {
                    $('#resultDiv').text(response); // 요청 결과를 표시할 요소
                },
                error: function() {
                    alert('에러 발생');
                }
            });
        });
    });
</script>

<button id="ajaxButton">AJAX 요청 보내기</button>
<div id="resultDiv">요청 결과: </div>

위의 코드에서 #ajaxButton을 클릭하면 AJAX 요청이 보내지며, 결과는 #resultDiv에 표시됩니다.

이렇게하면 Spring Thymeleaf를 사용하여 AJAX 요청을 전송하는 간단한 예제가 준비됩니다.

이 예제를 기반으로 프로젝트에 적용하여 원하는 AJAX 동작을 구현하시길 바라겠습니다.

저작자표시