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 동작을 구현하시길 바라겠습니다.
'Backend > Thymeleaf' 카테고리의 다른 글
| 쉽게 알아보는 Spring Thymeleaf란? (1) | 2023.11.01 |
|---|---|
| Thymeleaf를 이용한 웹 개발 소개 및 기능 (0) | 2023.02.27 |
| [Thymeleaf]게시판 Table에서 Paging 적용하기(SpringBoot) (2) | 2020.08.04 |
| [Thymeleaf]ajax 사용법 및 예제(SpringBoot) (7) | 2020.07.23 |
| [Thymeleaf]Layout을 이용해 화면 구성하기(SpringBoot) (0) | 2020.07.22 |
