【SpringBoot+Ajax】プルダウンの選択肢を非同期でDBから取得する

▼この記事をSNSでシェアする▼

スポンサーリンク

スポンサーリンク

プルダウンが複数あるとき、上の選択肢が連動して、下の選択肢が連動して設定されることがあります。

プルダウンのデータを取得する処理の際にページを毎回更新していては非常に面倒です。

ってことでJava ScriptのAjaxで非同期で取得するようにします。

ajaxと書きましたが、非同期処理はコントローラに書いて、その処理をjsから呼び出す形にします

やりたいこと

こんなイメージです。というかこれがゴール

職種で金融を選択すると、

金融系の仕事の選択肢が決まる

職種でITを選択すると、

IT系の仕事の選択肢が決まる

構成

DB

job_mappingテーブル

職種と仕事の選択肢のマスターテーブル

id job_type job

‘1’,’IT’,’アプリエンジニア’
‘2’,’IT’,’コンサルタント’
‘3’,’IT’,’ネットワークエンジニア’
‘4’,’IT’,’データベースエンジニア’
‘5’,’金融’,’銀行営業’
‘6’,’金融’,’銀行事務’

personテーブル

フォームから送られた個人のデータを格納するテーブル

id name age job_type job

‘1’,’yamai’,’IT’,’アプリエンジニア’

アプリケーション

  • Sample5Controller.java:入力画面・入力後画面のコントローラ
  • sample5.html:入力画面
  • sample3.html:入力後画面、personテーブルのデータを表示する
  • JobMappingRepository.java:職種のプルダウンに設定するデータを取得
  • JobMappingService.java:プルダウン用に職種にひもづく仕事データを取得する
  • job.js:非同期でプルダウンのデータ取得を行うためのJava Script
  • jquery-3.4.1.js:job.jsでajaxを有効化するために追加(bootstrap)

実装

JobMappingService.java

getPulldownDataがプルダウンに非同期でデータをセットするためにJSON形式に変換します

  • label:プルダウンの表示される名称
  • value:プルダウンの値

Sample5Controller.java

refreshJobPulldownメソッドで「/sample5/jobType/{jobType}」のURLをGETリクエストが来た時にでプルダウンのデータ取得をする処理を行うように設定

job.js

重要なのはsetPullDownJobsの関数で、JobMappingService.javaのgetPulldownDataで受け渡されたJSONからlabelとvalueを取得し、<select>タグに動的に設定する

コントローラの「/sample5/jobType/{jobType}」のURLをGETリクエストを読んだ時の処理を呼び出します。

他の関数は以下の入力用のフィールドでの値の受け渡しや初期化を設定しています

  • jobType:DBに送信する職種の値
  • jobTypeInput:プルダウンから入力された職種の値を保持するフィールド
  • job:DBに送信する仕事の値
  • jobInput:プルダウンから入力された仕事の値を保持するフィールド

下のHTMLのタグのIDを見比べるとわかりやすいかと思います。

sample5.html

jsで受け渡しや初期化をするためのjobInput, jobTypeInput, jobTypeMap, jobMapをhiddenで持たせておくのがポイント

まとめ

$.ajaxを使わずコントローラに書いてある非同期処理を$.getで呼び出すの書き方になりました。

プルダウンで非同期のデータを送り、設定するときの仕組みがわかってよかったです。

こういう書き方でいいのかな、アドバイスください。。。

hidden でもたせた値をjsでいろいろやりとりさせる仕組みを理解するのが若干時間かかりました。(そこも結構大事)

今回の実装の詳細はこちら(GitHub)

スポンサーリンク


関連記事

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(ITコンサル)
◆santaka(SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する