1.サーバーに /test データをリクエストする (fetch)
2.サーバーから返されたHTMLフラグメントを
(return "samplefragment/wrapper_sample :: fragmentSample")
テキストとして受け取る (res.text())
3.そのHTMLを特定のボックスに流し込む (innerHTML)
4.最後に、隠れていたドロワーを開く (openDrawer)
Controller(java)
public class SampleController {
@GetMapping("/test/main")
public String sampleMain() {
return "/sample/main_sample";
//file path: template/sample/main_sample.html
}
@GetMapping("/test")
public String sampleTest() {
return "sample/wrapper_sample :: fragmentSample";
//file path: template/sample/wrapper_sample.html
}
}
Parent View(親html) main_sample.html
<script type="text/javascript">
function openTest() {
fetch('/test')//ここで@GetMapping("/test")を呼び出す
.then(res => res.text())
.then(html => {
//htmlに'drawerContent'を入れる
document.getElementById('drawerContent').innerHTML = html;
openDrawer('drawer'); //open drawer
});
}
</script>
<input type="button" value="sample" onclick="openTest()"/>
<div id="drawerContent">
<!-- drawerContent wrapper fragment -->
</div>
Drawer View(子html) wrapper_sample.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- fragment -->
<div th:fragment="fragmentSample">
<p>親htmlのボタンをクリックしたときdrawerが表示される</p>
</div>
</body>
</html>
これを活用すれば、サイドメニューを作ることも可能
