Spring Boot Ajax/JavaScript/API連携

Spring Bootでボタンの二度押し防止機能を実装してみた

今回は、Spring BootのWEB画面上で、ボタンの二度押し防止機能を実装してみたので、そのサンプルプログラムを共有する。

前提条件

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

Spring BootでAjaxとjQueryで一覧表示を作ってみた今回は、Spring BootのWEB画面上で、AjaxとjQueryを利用して、複数件のテーブルデータを一覧に表示してみたので、そのサ...

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

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

HTMLファイルの内容は以下の通りで、「Ajax検索」ボタンと「画面再表示」ボタンを用意し、ボタン押下時に、それぞれJavaScriptの関数「getUserData」「reload」が呼ばれるようになっている。

また、JavaScriptファイルの内容は以下の通り。

関数「getUserData」はAjax通信後に、Ajax検索ボタンを非活性にし、関数「reload」はサブミット後に画面再表示ボタンを非活性にしている。さらに、画面ロード時に画面がロードされた旨のダイアログが表示されるようになっている。

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

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

1) Spring Bootアプリケーションを起動し、「http:// (ホスト名):(ポート番号)」とアクセスすると、以下の画面が表示され、「画面がロードされました」というダイアログが表示されるため、「OK」を押下
実行結果_1

2) 「Ajax検索」ボタンを押下
実行結果_2

3) 「Ajax検索ボタンが押下されました」というダイアログが表示されるため、「OK」を押下
実行結果_3

4) データが表示されると共に、「Ajax検索」ボタンが非活性になり、「Ajax検索」ボタンの二度押しができなくなっている
実行結果_4

5) 「画面再表示」ボタンを押下
実行結果_5

6) 「画面再表示ボタンが押下されました」というダイアログが表示されるため、「OK」を押下
実行結果_6

7) サブミット後に画面が再ロードされ、「画面がロードされました」というダイアログが表示されるため、「OK」を押下
実行結果_7

8) 「画面再表示」ボタン押下後に、サブミット処理を行った後「画面再表示」ボタンを非活性にしたが、画面が再ロードされたため、「画面再表示」ボタンが活性になっている
実行結果_8

要点まとめ

  • ボタンを非活性にするには、jQueryを利用する場合、prop()メソッドを用いてdisabled属性をtrueにすればよい。この処理により、ボタンの二度押しを防ぐことができる。
  • サブミット処理によりページ遷移が発生する場合は、サブミット直後にボタンを非活性にした場合でも、その後画面が再ロードされるため、非活性にしたボタンが再度活性になっている。