補講：その他のフォームからデータをServletに渡す

2022年1月18日 最終更新日時 : 2024年5月17日 山崎講師山崎講師

セレクトボックスで選択されたデータを受け取る

入力フォームのセレクトボックスを使ってみます。

個々のユーザーが現在の天気を登録して全国の天気予報をするWebアプリケーションのプロトタイプのイメージです。 

<!DOCTYPE html>
<html>
    <head>
        <title>select.html</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>今の天気を教えて下さい</p>
        <form action="/03_JavaWebText/Weather1">
            <p><select name = "weather">
                    <option value="晴れ">晴れ</option>
                    <option value="曇り">曇り</option>
                    <option value="雨">雨</option>
                </select></p>
            <button type="submit">送信</button>
        </form>
    </body>
</html>
  • 上記フォームで送られるデータに付けられた名前は何ですか？
あなたの答え：
  • 「晴れ」を選んだときに送られるデータは何ですか？
あなたの答え：

答えられなかった方はHTMLの「用途別のフォーム部品」を復習してください。

次にServletを用意します。

package p04;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns = {"/Weather"})
public class Weather extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        String weather = request.getParameter("weather");
        
        request.setAttribute("weather", weather);
        request.getRequestDispatcher("04Form/weather.jsp").forward(request, response);
    }
}
  • String weather = request.getParameter("weather");では何をしていますか？
あなたの答え：
  • request.setAttribute("weather", weather);では何をしていますか？
あなたの答え：
  • request.getRequestDispatcher("04Form/weather.jsp").forward(request, response);では何をしていますか？
あなたの答え：

最後にJSPです。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>weather.jsp</title>
    </head>
    <body>
        今は${weather}なんですね。
    </body>
</html>
  • 今は${weather}なんですね。では何をしていますか？
あなたの答え：

例題1

これまで作成してきた数当てゲームをセレクトボックスを使って実現しなさい。

図13

ラジオボタンで選択されたデータを受け取る

入力フォームのラジオボタンを使ってみます。

セレクトボックスと同様に天気予報をするWebアプリケーションのプロトタイプを作成してみます。

<!DOCTYPE html>
<html>
    <head>
        <title>Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>今の天気を教えて下さい</p>
        <form action="/03_JavaWebText/Weather">
            晴れ<input type="radio" name="weather" value = "晴れ"/><br>
            曇り<input type="radio" name="weather" value = "曇り"/><br>
            雨<input type="radio" name="weather" value = "雨"/><br>
            <button type="submit">送信</button>
        </form>
    </body>
</html>

ラジオボタンは排他的に単一の値だけを選択させるフォームでした。

  • 単一選択を実現するために重要なことは何でしたか？
あなたの答え：
  • 例題1からServletとJSPに変更が必要な箇所はある(あった)と思いますか？
あなたの答え：

例題2

これまで作成してきた数当てゲームをラジオボタンを使って実現しなさい。

図14

ボタンを使って送られたデータを受け取る

ボタンを使ってデータを送ります。

作成するアプリは今までと同様ですからそろそろ慣れてきたのではないでしょうか？

<!DOCTYPE html>
<html>
    <head>
        <title>Form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>今の天気を教えて下さい</p>
        <form action="/03_JavaWebText/Weather1">
            <input type="submit" name="weather" value="晴れ" >
            <input type="submit" name="weather" value="曇り">
            <input type="submit" name="weather" value="雨">
        </form>
    </body>
</html>
  • 先の＜radio.html＞と違うところは何ですか？
あなたの答え：

チェックボックスで選択された複数データを受け取る

チェックボックスを使うと複数の値が入力フォームからServletに渡る可能性があります。そのため、Servlet側では複数の値を文字列の配列として受け取ります。その点が今までのフォームとチェックボックスの違いです。具体的には以下のようにチェックボックス から渡されたデータはrequest.getParameterValuesメソッドを使って文字列配列に格納します。

String[] inquiries = request.getParameterValues("inquiry");

企業のお問い合わせのプロトタイプです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkbox.html</title>
</head>
<body>
	<p>お問い合わせフォーム</p>
	<form action="${pageContext.request.contextPath}/CheckBox">
		<p>お問い合わせ内容（複数選択可）</p>
		<input type="checkbox" name="inquiry" value="サービスを利用したい" />サービスを利用したい
		<input type="checkbox" name="inquiry" value="業務提携したい" /> 業務提携したい
		<input type="checkbox" name="inquiry" value="取材したい" />取材したい
		<p>当社を知ったきっかけ（複数選択可）</p>
		<input type="checkbox" name="media" value="TVCM" />TVCM
		<input type="checkbox" name="media" value="SNS" />SNS
		<input type="checkbox" name="media" value="新聞広告" />新聞広告 
		<input type="submit" value="送信" />
	</form>
</body>
</html>
</body>
</html>

Servletです。

package controller;

import java.io.IOException;

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

@WebServlet("/CheckBox")
public class CheckBoxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// Set request character encoding to UTF-8
		request.setCharacterEncoding("UTF-8");

		// Retrieve form data
		String[] inquiries = request.getParameterValues("inquiry");
		String[] media = request.getParameterValues("media");

		// Print form data to standard output
		System.out.println("お問い合わせ内容:");
		if (inquiries != null) {
			for (String str : inquiries) {
				System.out.println(str);
			}
		} else {
			System.out.println("なし");
		}

		System.out.println();

		System.out.println("当社を知ったきっかけ:");
		if (media != null) {
			for (String str : media) {
				System.out.println(str);
			}
		} else {
			System.out.println("なし");
		}
	}
}

＜入力の例＞

＜出力例＞

お問い合わせ内容:
サービスを利用したい
業務提携したい
取材したい

当社を知ったきっかけ:
TVCM
SNS
新聞広告

例題3

これまで作成してきた数当てゲームをチェックボックスを使って実現しなさい。

すなわち、全ての値を選択して必ず正解することも可能とせよ。

また、外れた場合は「もっと大きいよ」、「もっと小さいよ」ではなく、ただ「ハズレ」と表示せよ。

図18

実験1

今回作成したプログラムの中にはJSPで選択肢を選ばずに送信ボタンを押すとNullPointerExceptionが発生するプログラムとそうならないプログラムがありました。

そのような違いを生むものはソースコードのどの部分ですか？

あなたの答え：

以上で、「補講：その他のフォームからデータをServletに渡す」を終わります。

最後までお読みいただきありがとうございました。

投稿者プロフィール

山崎講師
山崎講師代表取締役
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
対象読者
新入社員
前の記事
Linuxのコマンドとショートカット　英語の名前の由来
2021年12月30日
次の記事
補講：JSTLをつかった単純な繰り返し
2022年1月18日