[Thymeleaf] 타임리프 자바스크립트에 데이터 입력

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

변수를 넘길 예제 컨트롤러를 하나 생성합니다.

 

그리고 'message' 라는 이름으로 '정상적으로 처리되었습니다.' 이라는 문자열을 담아 model에 넘깁니다.

 

@Controller
public class HomeController {

    @GetMapping("/test")
    public String test(Model model) {

        model.addAttribute("message", "정상적으로 처리되었습니다.");
        model.addAttribute("searchUrl", "https://www.google.com");
        return "test";
    }
}

 

아래 적힌 방법으로 작성하면 컨트롤러에서 받아온 데이터를 자바스크립트에 적용할 수 있습니다.

 

<script th:inline="javascript">

 

/*<![CDATA[*/

 

이 사이에 자바스크립트 코드를 적어주고 컨트롤러에서 넘어온 변수는 [[ ${   } ]] 로 감싸줍니다.

 

/*]]>*/

 

</scrirpt>

 

 

아래의 View 생성 예제를 참고해주세요.

 

<script th:inline="javascript">
    
    /*<![CDATA[*/
    
    var message = [[${message}]];
    alert(message);
    
    location.replace([[${searchUrl}]]);
    
    /*]]>*/
    
</script>

 

alert에서 메시지가 출력되고 지정한 주소로 이동합니다.

 

위 코드를 실행하면 메시지를 띄운 후 구글로 이동하게 됩니다.

 

이를 이용하여 컨트롤러에서 특정 로직을 처리하고 알림을 띄운 후 원하는 페이지로 이동할 수 있습니다.

 

간단한 예시로 글 작성이 완료되었을 때 바로 리스트로 보내주는 것이 아닌 '글 작성이 완료되었습니다' 라는 문구를 출력한 이후에 리스트로 보낼 때 사용합니다.

 

 

추가내용(2021.10.18)

 

타임리프 3.0 버전부터는 스크립트 사용 시 CDATA 구문을 작성하지 않아도 됩니다. 구체적인 내용은 첨부한 PDF 파일이나 공식 문서 링크에서 확인해주세요.

 

 

타임리프 메뉴얼 PDF 파일

usingthymeleaf.pdf

0.65MB

 

타임리프 공식 문서

Tutorial: Using Thymeleaf