Spring Boot Ajax/JavaScript/API連携

Spring Bootでbuttonタグによるサブミット処理をいろいろなブラウザで実行してみた

Spring BootのWeb画面上で、ボタン押下時のサブミットを行う際、JavaScriptによるサブミット定義を別に追加することもできるが、IEで実行した際に、他のブラウザ(Edge, Chrome, Firefox)で実行した時と違う動きになる場合があるので、注意が必要である。

今回は、buttonタグによるサブミット処理を、onclickボタン押下時にサブミットした場合/しなかった場合と、JavaScriptによるサブミット定義を定義した場合/しなかった場合それぞれについて、IE・Edge・Chrome・Firefoxでの動作を確認してみたので、共有する。

なお、IEの場合に2回サブミット処理が走ることについては、以下のサイトも合わせて参照のこと。
http://blog.netandfield.com/shar/2011/11/internet-explorer.html

前提条件

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

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

また、IEは11.789.19041.0、Edgeは94.0.992.38、Chromeは 94.0.4606.71、Firefoxは93.0のバージョンを、それぞれ利用するものとする。



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

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

HTMLファイルの内容は以下の通りで、「demo.js」を読み込む前に、jQueryのライブラリ「jquery-3.4.1.min.js」を読み込むようにして、動作検証用のボタン1~4を配置している。

JSファイル(demo.js)の内容は以下の通りで、ボタン3~4が押下された場合のサブミット処理の定義と、ボタンが押下されたタイミングでサブミットするtestClick関数を用意している。

サラリーマン型フリーランスSEという働き方でお金の不安を解消しよう先日、「サラリーマン型フリーランスSE」という働き方を紹介するYouTube動画を視聴しましたので、その内容をご紹介します。 「サ...

コントローラクラスの内容は以下の通りで、初期表示処理と、メソッドmethod1, method2を定義している。

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



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

各ブラウザ(IE, Edge, Chrome, Firefox)別にサンプルプログラムの実行結果は、以下の通り。

1) ボタン1を押下した結果は以下の通りで、どのブラウザで実行した場合も、th:action属性に設定したmethod1のみ実行されていることが確認できる。

 1-1) IEの場合の画面とコンソールログ
実行結果_1_1_1

実行結果_1_1_2

 1-2) Edgeの場合の画面とコンソールログ
実行結果_1_2_1

実行結果_1_2_2

 1-3) Chromeの場合の画面とコンソールログ
実行結果_1_3_1

実行結果_1_3_2

 1-4) Firefoxの場合の画面とコンソールログ
実行結果_1_4_1

実行結果_1_4_2
「EaseUS Todo Backup」は様々な形でバックアップ取得が行える便利ツールだったパソコン内のデータを、ファイル/パーティション/ディスク等の様々な単位でバックアップしたり、バックアップのスケジュール設定や暗号化設定も...

2) ボタン2を押下した結果は以下の通りで、どのブラウザで実行した場合も、何もメソッドが実行されていないことが確認できる。

 2-1) IEの場合の画面とコンソールログ
実行結果_2_1_1

実行結果_2_1_2

 2-2) Edgeの場合の画面とコンソールログ
実行結果_2_2_1

実行結果_2_2_2

 2-3) Chromeの場合の画面とコンソールログ
実行結果_2_3_1

実行結果_2_3_2

 2-4) Firefoxの場合の画面とコンソールログ
実行結果_2_4_1

実行結果_2_4_2



3) ボタン3を押下した結果は以下の通りで、IEで実行した場合は、th:action属性に設定したmethod1、demo.jsで設定したmethod2の順に実行されて、それ以外のブラウザの場合は、demo.jsで設定したmethod2のみ実行されることが確認できる。

 3-1) IEの場合の画面とコンソールログ
実行結果_3_1_1

実行結果_3_1_2

 3-2) Edgeの場合の画面とコンソールログ
実行結果_3_2_1

実行結果_3_2_2

 3-3) Chromeの場合の画面とコンソールログ
実行結果_3_3_1

実行結果_3_3_2

 3-4) Firefoxの場合の画面とコンソールログ
実行結果_3_4_1

実行結果_3_4_2
「AOMEI Partition Assistant Standard(無料)版」は便利なパーティション管理ツールだったハードディスクの記憶領域を論理的に分割し、分割された個々の領域のことを、パーティションといいます。 例えば、以下の図の場合、C/D...

4) ボタン4を押下した結果は以下の通りで、どのブラウザで実行した場合も、demo.jsで設定したmethod2のみ実行されることが確認できる。

 4-1) IEの場合の画面とコンソールログ
実行結果_4_1_1

実行結果_4_1_2

 4-2) Edgeの場合の画面とコンソールログ
実行結果_4_2_1

実行結果_4_2_2

 4-3) Chromeの場合の画面とコンソールログ
実行結果_4_3_1

実行結果_4_3_2

 4-4) Firefoxの場合の画面とコンソールログ
実行結果_4_4_1

実行結果_4_4_2

要点まとめ

  • Spring BootのWeb画面上で、ボタン押下時のサブミットを行う際、JavaScriptによるサブミット定義を別に追加することもできるが、IEで実行した際に、他のブラウザ(Edge, Chrome, Firefox)で実行した時と違う動きになる場合があるので、注意が必要である。