アラカン"BOKU"のITな日常

文系システムエンジニアの”BOKU”が勉強したこと、経験したこと、日々思うこと。

Ajax:Jsonで受け取り画面遷移なしに更新する STS 3.8.3(Spring Boot 1.5.1)+thymeleaf

今回も、StringBoot+thymeleafで、Ajaxを使うパターンです。

 

前回は、thymeleafの「th:fragment」機能を使って、プルダウンリストを更新するケースをやりました。

 

その時は、jQueryの$Ajaxの戻り値として整形済のHTMLを受け取りましたが、今回は、普通にデータをうけとって表示するケースをやります。

 

例えば、郵便番号の入力を受けて、住所をある程度まで住所フィールドに表示するとかの場合がそうですね。そんなイメージをやってみます。

 

ですが、本当に郵便番号から住所を取得とかをすると、ブログを書くためのサンプルとしては面倒くさすぎるので、極、簡単な例をやってみます。

 

2段のテキストボックスを用意して、上の段に何かを入力して、フォーカスが離れた時にサーバーから「JSONで値受け渡しのテスト」の文字列をJSON形式で受取、下の段に表示するというのをやります。

f:id:arakan_no_boku:20170407201057j:plain

 

最終的な結果はこんな感じになります。

f:id:arakan_no_boku:20170407201625j:plain

 

まず、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()を使っていることです。JSPなんかでやるAjaxのイメージに近いですね。

 

$Ajaxから呼び出される”getJsonData”は、コントローラクラスに記述します。

@RequestMapping(value = "getJsonData", method = RequestMethod.GET)
@ResponseBody
public String getJsonData(ModelMap model) {
     Gson gson = new Gson();
     return gson.toJson("JSONで値受け渡しのテスト");
}

 

重要なポイントは2点です。

 

@ResponsBodyアノテーションを付与しないと、thymeleafがreturnした値をHTMLファイル名とみなして処理をしようとするので、例外でおちてしまいます。(Exception processing template・・)

 

「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  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

Ajax:プルダウンリストの内容を画面遷移なしに更新する 

reCAPTCHA V2をでロボットによる投稿を防ぐ

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。

 

f:id:arakan_no_boku:20170404203859j:plain