Spring Boot Ajax/JavaScript連携

Spring BootでAjaxとjQueryで一覧表示を作ってみた

今回は、Spring BootのWEB画面上で、AjaxとjQueryを利用して、複数件のテーブルデータを一覧に表示してみたので、そのサンプルプログラムを共有する。

前提条件

下記記事の実装が完了していること。

Spring BootでjqueryのAjaxを利用してみた今回は、以前作成したAjaxのプログラムを、jQueryを利用する形に変更してみたので、そのサンプルプログラムを共有する。 前提条...

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

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠は、前提条件のプログラムから変更したプログラムである。

コントローラクラスの内容は以下の通りで、searchメソッドでUserDataリストを取得しJSON文字列で返却している。



また、HTMLファイルの内容は以下の通りで、検索ボタンとユーザーデータ表示用テーブルを用意している。

さらに、JavaScriptファイルの内容は以下の通りで、Ajax通信がを行い、append()メソッドを利用して、ユーザーデータを表示用テーブルに追加する処理を実装している。

その他のソースコード内容は、以下のサイトを参照のこと。
https://github.com/purin-it/java/tree/master/spring-boot-web-ajax-jquery-list/demo



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

user_dataテーブルのデータの内容は以下の通りとする。
user_dataテーブル

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

すると、user_dataテーブルの全データが一覧に表示される。
画面実行結果_2

要点まとめ

  • jQueryでテーブルデータを追加するには、append()メソッドを利用すればよい。