[Thymeleaf] 자바스크립트, QueryString, PathVariable, 페이지 참조replace (include/import)

자바스크립트

형태 : [[${변수}]]

-> 서버단 컨트롤러로 부터 넘겨받은 변수를 자바스크립트에서 받을 때 ${변수} 형태를 [대괄호]로 두번감싸 표현한다.

<script th:inline="javascript">
    var message = [[${변수1}]];
    alert(message);
    location.replace([[${변수2}]]);
  </script>

굳이? 라는 생각이 든다. 특별한 경우가 없다면 그냥 EL표현식을 통해 자바스크립트로 받아서 처리해도 상관 없을것 같다.

<script>
    var message = ${변수1};
    alert(message);
    location.replace(${변수2});
</script>

라고 생각했지만... 일반 자바스크립트로 받아서 사용한다고 하더라도 EL 표현식을 사용하기 위해서는 JSTL 라이브러리를 받아야하기 때문에... 쉽게 타임리프로 하는걸로....

 

 

타임리프 기본 형태

${객체.필드} => 값을 표현할때는 {중괄호} 앞에 $ 달러를

@{/매핑주소} => 경로,주소를 표현할 때는 {중괄호} 앞에 @ 골뱅이를 붙힌다.

 

 

context-relative URL

형태 : @{/url}

설명 : 서버 내 특정 위치로 이동이 가능하도록 하는 URL 경로.

<a th:href="@{/board}"></a>

/board 경로로 매핑된다.

 

 

QueryString

형태 : @{/url?변수=값}

<tr th:each="board : ${boardList}">
    <td th:text="${board.id}"></td>
    <td ><a th:href="@{/board?id=${board.id}}" th:text="${board.title}"></a></td>
    <td th:text="${board.content}">c</td>
</tr>

 

 

PathVariable

형태 : @{/url/{변수} (변수=${값})

<tr th:each="board : ${boardList}">
    <td th:text="${board.id}"></td>
    <td ><a th:href="@{/board/{id}(id=${board.id})}" th:text="${board.title}"></a></td>
    <td th:text="${board.content}">c</td>
</tr>

 

 

replace/insert/include (import/include)

형태 : th:replace(insert) = "/파일명 :: 태그명"

<div th:replace="/header :: roly"></div>
<div th:insert="/header :: poly"></div>
<div th:include="/header :: moly"></div>


<!-- ------------------ header.html파일 ------------------- -->
<roly>
  <span>header.html 호출 완료 roly Tag !!!</span>
</roly>

<poly>
  <span>header.html 호출 완료 poly Tag !!!</span>
</poly>

<moly>
  <span>header.html 호출 완료 moly Tag !!!</span>
</moly>

<!-- ----------------------- 결과 ------------------------- -->

<roly>
    <span>header.html 호출 완료 roly Tag !!!</span>
</roly>

<div>
	<poly>
    	<span>header.html 호출 완료 poly Tag !!!</span>
    </poly>
<div>

<div>
    <span>header.html 호출 완료 moly Tag !!!</span>
</div>