Spring Boot Ajax/JavaScript/API連携

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

Spring BootのWeb画面上で、ボタン押下時のサブミットを行う際、inputタグやbuttonタグにおいて、type属性にsubmitやbuttonを指定することができるが、IEで実行した際に、他のブラウザ(Edge, Chrome, Firefox)で実行した時と違う動きになる場合があるので、注意が必要である。

今回は、inputタグでtype属性にsubmit/buttonそれぞれを指定した場合、buttonタグでtype属性にsubmit/buttonそれぞれを指定した場合・何も指定しなかった場合それぞれについて、IE・Edge・Chrome・Firefoxでの動作を確認してみたので、共有する。

なお、buttonタグのtype属性はデフォルトでsubmitになるため、type属性にsubmitを指定した場合とtype属性に何も指定しなかった場合では、同じ動きになる。

前提条件

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

Spring Bootでbuttonタグによるサブミット処理をいろいろなブラウザで実行してみたSpring BootのWeb画面上で、ボタン押下時のサブミットを行う際、JavaScriptによるサブミット定義を別に追加することもで...

また、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~5を配置している。

「HD Video Converter Factory Pro」は動画の形式変換や編集・録画等を行える便利ツールだった動画の形式変換や編集・録画等を行える便利ツールの一つに、「HD Video Converter Factory Pro」があります。ここ...

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

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



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

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

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

 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
「MiniTool Partition Wizard」はパーティション分割・統合・バックアップ・チェックを直感的に行える便利ツールだったハードディスクの記憶領域を論理的に分割し、分割された個々の領域のことを、パーティションといいます。 例えば、以下の図の場合、C/D...

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

 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(2回)の順に実行されて、それ以外のブラウザの場合は、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
サラリーマン型フリーランスSEという働き方でお金の不安を解消しよう先日、「サラリーマン型フリーランスSE」という働き方を紹介するYouTube動画を視聴しましたので、その内容をご紹介します。 「サ...

4) ボタン4を押下した結果は以下の通りで、IEで実行した場合は、th:action属性に設定したmethod1、demo.jsで設定したmethod2(2回)の順に実行されて、それ以外のブラウザの場合は、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



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

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

実行結果_5_1_2

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

実行結果_5_2_2

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

実行結果_5_3_2

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

実行結果_5_4_2

要点まとめ

  • Spring BootのWeb画面上で、ボタン押下時のサブミットを行う際、inputタグやbuttonタグにおいて、type属性にsubmitやbuttonを指定することができるが、IEで実行した際に、他のブラウザ(Edge, Chrome, Firefox)で実行した時と違う動きになる場合があるので、注意が必要である。