JAVA(Springboot)からJQueryへの値の引渡しの方法

前提・実現したいこと

JAVAで作った値をJQueryに渡してそれを変数として使いたいと考えています。

やりたい事としては、JavaでDBの値を取得してHTMLで表示する際にDBで取得してきた要素分の<li>を作成したいです。その際にJQueryで要素数分for文を回して追加しようと考えました。ですがJavaからJQueryへの値の渡し方が分かりません。渡し方を教えて頂きたいです。

よろしくお願いします。

行動規範の内容に同意します

回答2件

mpywさんの１つ目だと解釈し回答します。

JavaScriptからAjaxでWebサーバにリクエストし、JSONを返す形を構成します。

メソッドに@ResponseBodyを付与すればreturnに指定するBeanやMapはJSONでレスポンスが受け取れます。
なんならコントローラには@RestControllerを付与しても良いと思う。

投稿2021/12/16 05:42

編集2021/12/16 05:44

m.ts10806

総合スコア80861

SpringBoot を一切使ったこと無いド素人ですので，参考程度に。

SPA (Single Page Application) の JSON API のみを SpringBoot で開発している場合

こちらの場合は

SpringBoot から JSON を出力するエンドポイントを作成
jQuery.ajax() で JSON の内容を取得し，動的に <li></li> を組み立てる

という内容になりますが，質問内容から察するになんとなく違う気がしているので割愛します。

MPA (Multiple Page Application) の HTML を SpringBoot + 標準テンプレートエンジン Thymeleaf で生成している場合

おそらくこちらかな？と推測してのエスパー回答です。jQuery は一切使いません。

まず， SpringBoot を調べてみると Thymeleaf という標準のテンプレートエンジンを持っていることを知りました。ですので，サーバサイドで取得したものは，サーバサイドで HTML を形成するところまで完結させるコードを書くほうが自然です。

「Thymeleaf でどうやってループ構文を書くのかな？」

として thymeleaf loop とかで調べてみると，情報がたくさん見つかります。

1個目の記事より引用，少しアレンジ

java
1var customers = new ArrayList<Customer>();
2customers.add(new Customer(1 , "Miura", "Kazuyoshi"));
3customers.add(new Customer(2 , "Kitazawa", "Tsuyoshi"));
4customers.add(new Customer(3 , "Hashiratani", "Tetsuji"));
5model.addAttribute("customers", customers);

html
1<tr th:each="customer : ${customers}">
2    <td>[[${customer.id}]]</td>
3    <td>[[${customer.lastName}]]</td>
4    <td>[[${customer.firstName}]]</td>
5</tr>