Spring Boot

Spring BootでjqueryのAjaxを利用してみた

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

前提条件

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

Spring BootでAjaxを利用してみたSpring BootのWEB画面上では、Ajax通信も行うことができる。今回は、jQueryを利用しない形で、Ajax通信を含むサンプ...

jQueryのダウンロード

以下の手順で、本日2020/3/17時点での最新jQuery(圧縮版)のダウンロードが行える。

1. 下記サイトにアクセスし、「Download the compressed, production jQuery 3.4.1」のリンクを右クリックし、「対象をファイルに保存」を選択
https://jquery.com/download/

jQueryのダウンロード_1

2. 保存先を選択し「保存」ボタンを押下
jQueryのダウンロード_2

3. 以下のように、jQuery(圧縮版)がダウンロードされる
jQueryのダウンロード_3

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

作成したサンプルプログラムの構成は以下の通り。
サンプルプログラムの構成
なお、上記の赤枠のうち、「jquery-3.4.1.min.js」が先ほど「jQueryのダウンロード」でダウンロードしたファイルで、それ以外が、前提条件のプログラムから変更したプログラムである。

index.htmlの内容は以下の通りで、「demo.js」を読み込む前に、「jquery-3.4.1.min.js」を読み込むようにしている。

また、「demo.js」の内容は以下の通りで、Ajax通信と、検索IDの値を取得する処理、及び、UserDataオブジェクトの値を画面に設定する処理を、jQueryを利用するよう修正している。

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

下記記事の「サンプルプログラムの実行結果」と同じ実行結果となる。

Spring BootでAjaxを利用してみたSpring BootのWEB画面上では、Ajax通信も行うことができる。今回は、jQueryを利用しない形で、Ajax通信を含むサンプ...

要点まとめ

  • Spring BootのWEB画面でも、jQueryを利用することができ、Ajax通信や、画面の値取得・設定をjQueryで実装できる。