Ajaxを使うパターンです。
今回は、サーバーからJSONで値を受け取って非同期更新するのをやってみます。
JSONで値受け渡し
郵便番号の入力を受けて、住所をある程度まで住所フィールドに表示するとかの場合をイメージしてやってみようかと思ったのですが、ブログを書くためのサンプルとしては面倒くさすぎるので、やめました（笑）
簡単な例をやってみます。
2段のテキストボックスを用意して、上の段に何かを入力します。
↓
フォーカスが離れた時にサーバーから「JSONで値受け渡しのテスト」の文字列をJSON形式で受取ります。
↓
それを、下の段に表示します。
こんな感じです。
最終的な結果はこんな感じになります。
まず、HTML側です。
<form role="form" id="hello4Form" action="/outpg01" th:action="@{/outpg01}" th:object="${hello4Form}" method="post">
<p class="msg" th:text="#{please.pid2}">何か入力するとJSONテストの文字列を下のボックスにいれます</p>
<input type="text" id="inputPid" name="inputPid" th:field="*{inputPid}" />
<br />
<input type="text" id="chktest" name="chktest" th:field="*{chktest}" />
<br /></form>
下の段（chktest）に、th:fragmentなどを使っていないのを確認ください。
Ajaxを処理するjQueryの部分です。
<script>
<!--
$(function() {
// Ajax通信テスト ボタンクリック
$("#inputPid").blur(function() {
event.preventDefault();
// outputDataを空に初期化
$.ajax({
type : "GET",
url : "getJsonData",
dataType : "json",
success : function(data,status,xhr) {
$("#chktest").val(data);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("error:" + XMLHttpRequest + "/" + textStatus + "/" + errorThrown);
}
});
});
});
//-->
</script>
前回との違いは、datatypeが「json」であることと、dataをセットするのに、jQueryのIDセレクタとvalueに値をセットするval()を使っていることです。
コントローラクラス
$Ajaxから呼び出される”getJsonData”は、コントローラクラスに記述します。
@RequestMapping(value = "getJsonData", method = RequestMethod.GET)
@ResponseBody
public String getJsonData(ModelMap model) {
Gson gson = new Gson();
return gson.toJson("JSONで値受け渡しのテスト");
}
重要なポイントを整理する
重要なポイントは２点です。
@ResponseBodyアノテーションを付与している
@ResponsBodyアノテーションを付与しないと、thymeleafがreturnした値をHTMLファイル名とみなして処理をしようとするので、例外でおちてしまいます。（Exception processing template・・）
JSON形式のデータをreturnしている。
コントローラクラスの「gson.toJson("JSONで値受け渡しのテスト");」で、文字列をJSON形式に変換してreturnしています。
Gsonは、Googleが提供する「JavaオブジェクトとJSONを相互変換するライブラリ」です。使い方は、ここでは説明しませんので、参考になる記事を紹介しておきます。
SpringBootで使うには、pom.xmlに次のように定義しておく必要があります。
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.0</version>
</dependency>
まとめです
Ajaxは、前回のthymeleafで処理してHTMLを返すパターンと、今回のJSONを返すパターンができれば、必要十分じゃないかと個人的には思ってます。
あまり、多用するとはまった時に苦しみますから。
STS＋Spring Boot＋thymeleaf 関連記事
入力画面に関連する記事
参照画面・画面遷移に関連する記事
参照画面：テーブルを使い、行毎に色分けした一覧表を表示する。
入力チェックに関連する記事
入力チェック：@Patternと正規表現で独自チェックする。
入力チェック用アノテーション定義を自分で作る。（独自実装版）
データアクセス・その他に関連する記事
データアクセス：Jprepositoryを使って簡単にCRUDする。
SpringBootプロジェクトでJUNIT４を使った単体テストをする。
