Spring Boot Ajax/JavaScript/API連携

Spring Bootでリスト設定値をJavaScriptの引数に渡してみた

今回は、Spring Bootのコントローラクラスで設定されたModelオブジェクトのリスト値を、JavaScriptの引数に渡すサンプルプログラムを作成してみたので、共有する。

リストの各要素のインデックスは、th:eachタグの第二引数に指定したオブジェクトのindexで取得することができる。このインデックスを利用してリストの各要素をhidden項目に設定すれば、JavaScriptにリストの各要素の値を渡すことができる。

前提条件

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

IntelliJ IDEA上でGradleを使ってWeb画面のSpring Bootプロジェクトを作成してみたSpring Bootのプロジェクトを新規作成を「IntelliJ IDEA」のメニューから実施しようとしたところ、無料の「Commun...

サンプルプログラムの作成と実行

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

コントローラクラスの内容は以下の通り。ModelオブジェクトにstrNumListの値を設定し、index.htmlに遷移している。



また、index.htmlの内容は以下の通り。リストの各要素のインデックスを利用してリストの各要素をhidden項目に設定することで、JavaScriptにリストの各要素の値を渡している。

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

さらに、このプログラムを実行した結果は以下の通り。
Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスすると、以下の画面が表示される。
サンプルプログラム実行結果1

上記画面で「0000001」リンクを押下すると、以下のダイアログが表示され、ダイアログにリストの要素の値が表示されることが確認できる。
サンプルプログラム実行結果2

また、「0000003」リンクを押下すると、以下のダイアログが表示され、同じようにダイアログにリストの要素の値が表示されることが確認できる。
サンプルプログラム実行結果3

要点まとめ

  • Spring Bootのリスト設定値をJavaScriptの引数に渡すには、リストの各要素のインデックスを利用してhidden項目に各要素を設定し、その値を利用すればよい。