Spring Boot Ajax/JavaScript/API連携

Spring Bootでのウィンドウを開くタイミングのエラー処理を実装してみた

今回は、Spring Bootのウィンドウを開くタイミングでエラーが発生した場合に、開く予定だったウィンドウを閉じ、その親画面にエラーメッセージを表示してみたので、そのサンプルプログラムを共有する。

前提条件

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

Spring Bootでのウィンドウを開く処理をJavaScriptで実施してみたウィンドウを開く処理は、GETリクエスト・POSTリクエストのどちらであっても、JavaScriptで実装できる。今回は、GETリクエス...

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

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

初期表示画面のHTMLは以下の通りで、エラーメッセージを表示する領域と、「新規ウィンドウをオープン時にエラー(POST)」ボタンを追加している。

「新規ウィンドウをオープン時にエラー(POST)」ボタンを押下したタイミングで開く画面のHTMLは以下の通りで、この画面をロードしたタイミングで、printOpenErrMsg関数を呼ぶようにしている。



フリーランスエンジニアのエージェントは就業中でも無料で登録できるITエンジニアには、フリーランスという働き方がある。 フリーランスとは、会社や団体などに所属せず、仕事に応じて自由に契約する人のこ...

JavaScriptの内容は以下の通りで、printOpenErrMsgメソッドで、ウィンドウを開くタイミングでエラーが発生した場合に、開く予定だったウィンドウを閉じ、DOM操作によってその親画面にエラーメッセージを表示する処理を行っている。

CSSファイルの内容は以下の通りで、エラーメッセージを赤字で表示するようにしている。



その他、コントローラクラスの内容は以下の通りで、「新規ウィンドウをオープン時にエラー(POST)」ボタン押下時に、エラーメッセージを設定するようにしている。

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

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

サンプルプログラムの実行結果は、以下の通り。

1) Spring Bootアプリケーションを起動し、「http://(サーバー名):(ポート番号)/」とアクセスすると、以下の画面が表示される。
サンプルプログラムの実行結果_1

2) 「新規ウィンドウをオープン時にエラー(POST)」ボタンを押下すると、開く予定だったウィンドウを閉じ、初期表示画面にエラーメッセージが表示されることが確認できる。
サンプルプログラムの実行結果_2_1

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

要点まとめ

  • ウィンドウを開くタイミングでエラーが発生した場合に、開く予定だったウィンドウを閉じ、その親画面にDOM操作によってエラーメッセージを表示する処理を実装することができる。