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

2022年1月18日 最終更新日時 : 2022年9月22日 山崎講師山崎講師

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

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

個々のユーザーが現在の天気を登録して全国の天気予報をする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);
    }
}
  • 18行目では何をしていますか？
あなたの答え：
  • 20行目では何をしていますか？
あなたの答え：
  • 21行目では何をしていますか？
あなたの答え：

最後に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>
  • 9行目では何をしていますか？
あなたの答え：
  • 日本語が文字化けせずに表示されるのはなぜですか？
あなたの答え：

例題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[] strs = request.getParameterValues("guess");

天気予報のプロトタイプの例です。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Form</title>
    </head>
    <body>
        <p>今の天気を教えて下さい</p>
        <form action="/03_JavaWebText/GameServlet4">
            晴れ<input type="checkbox" name="weather" value = "晴れ"/>
            曇り<input type="checkbox" name="weather" value = "曇り"/>
            雨<input type="checkbox" name="weather" value = "雨"/>
            <input type="submit" value="送信" />
        </form>
    </body>
</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 = {"/Weather3"})
public class Weather3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        String[] weathers = request.getParameterValues("weather");
        
        String weather = "";
        
        for (int i = 0; i < weathers.length; i++) {
            weather += weathers[i]+",";
        }
        
        weather = weather.substring(0,weather.length()-1);
            
        request.setAttribute("weather", weather);
        request.getRequestDispatcher("04Form/weather.jsp").forward(request, response);
    }
}
  • Weather2からの変更点はなんですか？
あなたの答え：
  • 22行目のfor文では何をしていますか？
あなたの答え：
  • 26行目では何をしていますか？
あなたの答え：

例題3

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

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

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

図18

実験1

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

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

あなたの答え：

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

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

対象読者
新入社員
前の記事
Linuxのコマンドとショートカット　英語の名前の由来
2021年12月30日
次の記事
補講：JSTLをつかった単純な繰り返し
2022年1月18日