Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JSP/Servlet

JSP/Servletでポップアップを表示する方法について

投稿日:2021年11月20日 更新日:

 

<目次>

(1) JSP/Servletでポップアップを表示する方法について
 (1-1) 実現したい事
 (1-2) 構文
 (1-3) サンプルプログラム

(1) JSP/Servletでポップアップを表示する方法について

(1-1) 実現したい事

JSP/Servletの画面でエラーを表示する際に、ポップアップを表示して、その中にエラーメッセージを表示して通知する方法についてご紹介します。

例えば、次の図のようなJSP画面(初期表示)⇒Sevlet(入力チェック処理)⇒JSP画面(エラー表示)という画面遷移があった際に、遷移後のJSP画面でポップアップ(エラー表示)を出力しています。

(図111)

(動画)
 
今回の記事は、このようなエラーも表示できる「ポップアップの作成方法」についてです。
 

(1-2) 構文

ポップアップにエラーメッセージを表示する際に、ポイントとなる処理に絞って構文として纏めてご紹介します。
 
またイメージを湧きやすくするため、具体的な画面をイメージして構文を見ていきます。例えば画面上に「氏名」項目があったとして、その項目に対して「必須チェック」が掛かっているとします(空欄で送信するとエラーになる)。
 
(図121)

そのうえで、実装のポイントとなる4つの構文をご紹介します。実装箇所はそれぞれ下図の箇所になります。
(図122)
 
・①処理対象のエラーメッセージのセット
「request.setAttribute」でリクエストの属性にエラーメッセージをセットし、遷移先のJSPで受け取れるようにしています。
(構文)
request.setAttribute("error_msg", "「氏名」は空欄にできません。");
 
⇒(参考)request.setAttributeについて
 
・②エラー表示をするJSP画面に遷移
エラーメッセージ(ポップアップ)を表示するJSP(元の入力画面)へ画面遷移(forward)させます。
(構文)
RequestDispatcher rd = getServletContext().getRequestDispatcher(“遷移先画面名.jsp”);
rd.forward(request, response);
 
⇒(参考)画面遷移(forwardやformのsubmitなど)
 
・③JSP画面にてエラーメッセージの取得
遷移した先のJSP画面にて、①でリクエストの属性にセットしたエラーメッセージを抽出します。その彩にif文でメッセージが「nullでない」場合に取得をしています。
(構文)

<%
if(request.getAttribute("error_msg")!=null){
	String error_msg = (String)request.getAttribute("error_msg");
%>

・④JavaScriptでAlertメッセージを出力
最後にJSP側でJavaScriptを組み込み、エラーメッセージをポップアップ(alert)に乗せて出力しています。「<%=error_msg%>」でメッセージの内容を取得しています。
(構文)
<script type="text/javascript">
    var msg = "<%=error_msg%>";
    alert(msg);
</script>

(1-3) サンプルプログラム

項目の必須チェックでポップアップを出すServletJSPのサンプルプログラムをご紹介します。

●JSP①

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ITxxxx_エラー時ポップアップ出力</title>
</head>
<form method="POST" action="ITxxxx_ShowPopUpServlet" name="validataion">
名前を入力して「送信」を押して下さい。<br /><br />
<body>
  ①氏名: <input type="text" name="g_name" id="name" />
  <br />
  <input type="submit" value="送信" /></td>
</body>
  <%
  if(request.getAttribute("error_msg")!=null){
    String error_msg = (String)request.getAttribute("error_msg");
  %>
  <script type="text/javascript">
    var msg = "<%=error_msg%>";
    alert(msg);
  </script>
  <%}%>
</form>
</html>
(図131)

目次にもどる

●Servlet

package studyc;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.RequestDispatcher;

@WebServlet("/ITxxxx_ShowPopUpServlet")
public class ITxxxx_ShowPopUpServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;
  public ITxxxx_ShowPopUpServlet() {
    super();
  }
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
  {
    //# GET時の必須入力チェックの実行
    MandatoryCheck(request,response);
  }

  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
  {
    doGet(request, response);
  }
  //# エラーメッセージを格納するためのArrayList
  public ArrayList<String> errs = new ArrayList<String>();
  
  //# エラーメッセージを格納したArrayList「errs」のメッセージをHTML形式に整形(タグを付与)したり、文字色を赤くする処理をしています。
  //# StringBuffer型の変数に格納していき、その結果を戻り値にしています。  
  public String getErrorList() {
      StringBuffer buf = new StringBuffer();
      if(errs.size()>0) {
          for(int i=0; i<errs.size(); i++) {
              buf.append("・"+errs.get(i));
          }
      }
      return buf.toString();
  }
  //# 必須入力チェックを行うメソッドです。
  public void requiredCheck(String value, String name) {
      //もし「引数(value)がnull」OR「引数(value)の空白削除値が空」なら
      if(value==null || value.trim().isEmpty()) {
          //入力値がブランクであると見なし、入力を求めるメッセージを出力
          errs.add(name+" は必須項目です。値を入力してください。");
      }
  }
  //# 必須入力チェックの全体処理
  //# 入力値の取得→必須チェック→エラーメッセージのセット→画面遷移までの一連の処理を行うメソッド
  public void MandatoryCheck(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      errs = new ArrayList<String>();
      String v_name = request.getParameter("g_name");
      
      //# もし必須入力のいずれかが「null」OR「ブランク」の場合
      if(v_name==null || v_name=="") {
          //# 必須入力項目のチェックを実行
          //# (requiredCheckを実行して空なら「[項目名] is a mandatory~」のエラーメッセージがArrayListに格納される)
          requiredCheck(request.getParameter("g_name"),"[①氏名]");
          //# エラーメッセージをリクエストの属性としてセット
          request.setAttribute("error_msg", getErrorList());
          
          //# エラーメッセージを表示するため、再び項目の入力画面に戻る
          String nextpage="/ITxxxx_ShowPopUpMsg.jsp";
          RequestDispatcher rd = getServletContext().getRequestDispatcher(nextpage);
          rd.forward(request, response);
      }
      //# 必須入力項目がnullかブランクでない場合、各項目の値をリクエストの属性(末尾に2を付けた項目名)としてセットしていく
      else {
          //# バリデーションの結果問題なければ、次画面に遷移する
          String nextpage="/ITxxxx_ShowPopUpMsgResult.jsp";
          RequestDispatcher rd = getServletContext().getRequestDispatcher(nextpage);
          rd.forward(request, response);
      }
  }

}
(図132)

目次にもどる

●JSP②(※今回は使用せず)

正常に処理された際の結果表示用の画面です。今回はエラー処理で元の入力画面に戻るため、本画面は使いませんでしたが、一応掲載しておきます。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ITxxxx_エラー時ポップアップ出力</title>
</head>
<body>
<br />
必須チェック成功です。
<br />
こんにちは "<%=request.getParameter("g_name")%>"" さん!
<br />
<a href="ITxxxx_ShowPopUpMsg.jsp">→前ページに戻る</a>
</body>
</html>

(図133)

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaのJDBC接続でjava.sql.SQLRecoverableException: Closed Connectionが発生した時の解決メモ

(0)目次&概説 (1) エラー事象の概要  (1-1) エラーの発生状況  (1-2) エラーメッセージ全文 (2) エラーの原因 (3) エラーの対処方法  (3-1) エラーの修正内容  (3- …

Javaで正規表現の使い方をご紹介+サンプルプログラム付き

<目次> (1) Javaで正規表現の使い方をご紹介  (1-1) 正規表現とは?  (1-2) Javaでの正規表現の使い方  (1-3) サンプルプログラム (1) Javaで正規表現の使い方をご …

Newton法で平方根を求めるJavaのサンプルプログラム+操作動画もご紹介

<目次> (1) Newton法で平方根を求めるJavaのサンプルプログラム  (1-1) Newton法の式を簡単に復習  (1-2) Newton法のサンプルプログラム (1) Newton法で平 …

JVMの基本アーキテクチャと各サブシステム等の概要説明について

(0)目次&概説 (1) 記事の目的 (2) Javaのアーキテクチャ概要・概観 (3) JVMのアーキテクチャ概要  (3-1) JVMの概観  (3-2) JVMの主要サブシステム1:Class …

Javaのスレッドとは?概念やサンプルプログラムのご紹介

  <目次> (1) Javaのスレッドとは?概念やサンプルプログラムのご紹介  (1-1) Javaのスレッドとは?  (1-2) 方法①:Threadクラス継承の構文  (1-3) 方法 …

  • English (United States)
  • 日本語
Top