Spring Boot

Spring BootでAjaxを利用してみた

Spring BootのWEB画面上では、Ajax通信も行うことができる。今回は、jQueryを利用しない形で、Ajax通信を含むサンプルプログラムを作成してみたので、共有する。

前提条件

下記記事のSpring BootでのOracle接続処理の実装が完了していること。

Spring BootでOracle接続処理を実装してみたSpring BootのWEBアプリケーションを開発する際、なんらかのデータベースにアクセスすることが多いが、SpringのJPAライブ...

また、以下の記事の「hibernate_sequence」シーケンスの作成が完了していること。

Spring BootのWEB画面上でCRUDを含むOracleアクセス処理を実装してみた(完成イメージ編)今回は、C(Create)・R(Read)・U(Update)・D(Delete)を一通り含むOracle接続処理をSpring Boo...

サンプルプログラムの作成

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、今回は、上記赤枠のすべてのプログラムについて掲載する。

まず、HTMLは以下の内容になっていて、検索ボタンを押下した場合に、後述のdemo.jsの関数「getUserData」を呼び出すようになっている。

また、demo.jsの内容は以下の通りで、検索IDの値を引数に、Ajax通信でsearchメソッドを呼び出し、その処理が正常終了した場合は、取得したUserDataオブジェクトの値を、画面上に表示するようになっている。

さらに、コントローラクラスの内容は以下の通りで、Ajax通信で呼ばれるsearchメソッドは、@ResponseBodyアノテーションを付与し、取得したUserDataオブジェクトをJSON文字列に変換して返却している。

また、UserDataオブジェクトとそれを取得するリポジトリの内容は以下の通りで、JpaRepositoryを利用して、検索IDに対応するUserDataを取得するようになっている。

その他の実装内容は以下の通り。

サンプルプログラムの実行結果

user_dataテーブルのデータの内容は以下の通りで、ID=1のデータは存在し、ID=2のデータは存在しないものとする。
user_dataテーブルの値

また、Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスすると、以下の画面が表示される。
実行結果1

次に、以下のように、検索IDに1を指定し「検索」ボタンを押下すると、検索されたデータが表示される。
実行結果2_1

実行結果2_2

さらに、以下のように、検索IDに2を指定し「検索」ボタンを押下すると、該当するデータがない旨のダイアログが表示される。
実行結果3_1

実行結果3_2

要点まとめ

  • Spring Bootのコントローラメソッド上でJSON文字列を返却するには、メソッドに@ResponseBodyアノテーションを付与し、戻り値はJSON文字列とする。
  • Javaソース内でオブジェクトをJSON文字列に変換するには、ObjectMapperクラスのwriteValueAsStringメソッドを利用する。
  • JavaScriptソース内でJSON文字列をオブジェクトに変換するには、JSON.parseメソッドを利用する。