Spring Boot Ajax/JavaScript/API連携

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

今回は、Spring Bootのコントローラクラスで設定されたModelオブジェクトの値を、JavaScriptの引数に渡す実装で少しつまずいてしまったので、その実装方法について共有する。

Modelオブジェクトの値をJavaScriptの引数に渡すには、hidden項目を利用するか、scriptタグ・th:inline=”javascript”内で「/*[[${(Modelオブジェクトの属性名)}]]*/」と指定すれば、対応することができる。

前提条件

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

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

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

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

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



また、index.htmlの内容は以下の通り。func1,func2のそれぞれの関数内で、Modelオブジェクトの値を取得し、alert関数の引数に渡している。

さらに、このプログラムを実行した結果は以下の通り。

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

上記画面で「テスト1」ボタンを押下すると、以下のダイアログが表示される。
実行結果2

また、「テスト2」ボタンを押下すると、以下のダイアログが表示される。
実行結果3

要点まとめ

  • Modelオブジェクトの値をJavaScriptの引数に渡すには、hidden項目を利用するか、scriptタグ・th:inline=”javascript”内で「/*[[${(Modelオブジェクトの属性名)}]]*/」と指定すればよい。