"BOKU"のITな日常

62歳・文系システムエンジニアの”BOKU”は日々勉強を楽しんでます

Ajax:Jsonで受け取り画面遷移なしに更新する STS3+Spring Boot +thymeleaf

Ajaxを使うパターンです。 

今回は、サーバーからJSONで値を受け取って非同期更新するのをやってみます。

f:id:arakan_no_boku:20190222012501j:plain

 

 

JSONで値受け渡し

 

郵便番号の入力を受けて、住所をある程度まで住所フィールドに表示するとかの場合をイメージしてやってみようかと思ったのですが、ブログを書くためのサンプルとしては面倒くさすぎるので、やめました(笑)

簡単な例をやってみます。 

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点です。

 

@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を返すパターンができれば、必要十分じゃないかと個人的には思ってます。

arakan-pgm-ai.hatenablog.com

あまり、多用するとはまった時に苦しみますから。 


 STS+Spring Boot+thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

f:id:arakan_no_boku:20170404203859j:plain