補講：その他のフォームからデータをServletに渡す
山崎講師セレクトボックスで選択されたデータを受け取る
入力フォームのセレクトボックスを使ってみます。
個々のユーザーが現在の天気を登録して全国の天気予報をする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
これまで作成してきた数当てゲームをセレクトボックスを使って実現しなさい。
ラジオボタンで選択されたデータを受け取る
入力フォームのラジオボタンを使ってみます。
セレクトボックスと同様に天気予報をする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
これまで作成してきた数当てゲームをラジオボタンを使って実現しなさい。
ボタンを使って送られたデータを受け取る
ボタンを使ってデータを送ります。
作成するアプリは今までと同様ですからそろそろ慣れてきたのではないでしょうか？
<!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
これまで作成してきた数当てゲームをチェックボックスを使って実現しなさい。
すなわち、全ての値を選択して必ず正解することも可能とせよ。
また、外れた場合は「もっと大きいよ」、「もっと小さいよ」ではなく、ただ「ハズレ」と表示せよ。
以上で、「補講：その他のフォームからデータをServletに渡す」を終わります。
最後までお読みいただきありがとうございました。
