2017.08.03

【Java】Spring Boot x thymeleafでajax処理をしよう！

mokabuu

やりたいこと
timelineでread more…を押下すると

次の10件が読み込まれる

っていうのをやりたかったのでソースを書きました！

thymeleafでajax処理
まずfragmentを切り出して

※切り出されたfragment

<div th:fragment="timeline" th:remove="tag">
	<script type="text/javascript" src="../js/timeline/loadmore.js"></script>
	<div id="jildinTimeline" th:if="${msg} != null"
		style="margin-top: 64px;">
		<div th:each="d : ${msg}" class="container-fluid">
			<div class="mdl-card mdl-shadow--2dp"
				style="margin: auto; margin-top: 10px; min-width: 90%;">
				<div class="mdl-card__title"
					style="background: #3498DB; color: #FFF; overflow: visible;">
					<h2 class="mdl-card__title-text">
						<span th:utext="${d.picture}"></span>
					</h2>
				</div>
				<div class="mdl-card__supporting-text">
					<span th:utext="${d.message}">デフォルト文言</span>
				</div>
				<div class="mdl-card__actions mdl-card--border"
					style="text-align: right;">
					<span style="font-size: 0.8em;" th:utext="${d.prcDate}"></span>
				</div>
			</div>
		</div>
		<span id="morePageNum" name="nextPageNum"
			th:utext="${timelinePageNum}" style="visibility: hidden;"></span>
		<center>
			<span onclick="loadmore();">read more...</span>
		</center>
	</div>
</div>

※切り出し元のfragment

<div th:replace="timeline/timeline :: timeline"></div>

ajax処理でapiを叩きます

var loadmore = function(){
	$.ajax({
		type : "GET",
		url : "/hogehoge",
		data : {
			tpn: $('#morePageNum').text()
		},
		dataType : "html",
		success : function(data, status, xhr) {
			$('#jildinTimeline').html(data);
	　　	},
		error : function(XMLHttpRequest, status, errorThrown) {
			console.log(XMLHttpRequest);
			console.log(status);
			console.log(errorThrown);
		}
	});
}

で、Javaでサーバーサイドのロジックを書けば

@RequestMapping(value = "/hogehoge", method = RequestMethod.GET)
public String getMorePage(Principal principal, Model model, String tpn) {
	//処理(必要なものをmodelにaddAttributeする処理を書いてください)
	return "timeline/timeline :: timeline";
}

完成ですッ！
ちなみに面倒臭いのでペース数をhtml側にhiddenで持たせていますが良い子は間違っても真似しないようにしましょう！

※僕は最終的にscopeをsessionにしてAP側に持たせています。

まとめ
successの中で更新処理を書いてあげるのが大事ですね！

ページの一部だけ更新したい場合はfragmentを分けるのが大事ですね！

ちなみにちょっと複雑なことをやりたかったらscopeを意識しつつ「org.springframework.ui.model」に必要な分だけ情報を渡すのが大事ですね！

※ミスるとAさんにBさんの情報を見せてしまうことになったりするのでscopeは気をつけましょう。

[adsense]

Xからの読者コメントをお待ちしています。
ブログ更新の励みになります！