【Spring】Thymeleaf上でコンテキストパスを取得する方法【Thymeleaf】

フロント側から非同期通信する場合、
Ajaxリクエストの送信先URLの設定で
コンテキストパスを使いたい場合がある。

<script>
        // ボタンクリック時にAjaxリクエストを発行
        $('#ajaxButton').click(function() {
            $.ajax({
                url: '/context-path/ajax-endpoint', 
                type: 'GET', // GETリクエスト
                success: function(data) {
                    // Ajaxの結果を表示
                    $('#result').text('Ajaxの結果: ' + data);
                },
                error: function() {
                    // エラーハンドリング
                    $('#result').text('Ajaxリクエストが失敗しました');
                }
            });
        });
</script>

Thymeleafでコンテキストパス（Context Path）を取得するには、
次のように@{/}を使用する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>コンテキストパスの取得</title>
</head>
<body>
    <script th:inline="javascript">
　　　　// コンテキストパスの取得
        var contextPath = /*[[ @{/} ]]*/ '';
　　　　　$.ajax({
                url: contextPath + 'ajax-endpoint', 
                type: 'GET', // GETリクエスト
                success: function(data) {
                    // Ajaxの結果を表示
                    $('#result').text('Ajaxの結果: ' + data);
                },
                error: function() {
                    // エラーハンドリング
                    $('#result').text('Ajaxリクエストが失敗しました');
                }
            });
    </script>
</body>
</html>

上記のコードでは、’/*[[ @{/} ]]*/ ”;‘ を使用してコンテキストパスを取得し、Thymeleafを使ってその値を表示している。

<script th:inline="javascript">
        var contextPath = /*[[ @{/} ]]*/ '';
</script>

この方法を使用すると、Thymeleafテンプレート内でコンテキストパスを動的に取得できる。