JSPの基本構造 (3)

フォームからの入力を受け取る(1)

以下のQuest.htmlでは、Formタグのaction属性の値には、送信ボタンが押された時に、ラジオボタンにより選択された内容が、 JSPプログラムである Quest.jspにPOSTメソッドにより送信されることを指定している。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>アンケート調査</title>
</head>
<body>
<h1>アンケート調査</h1>
<form method="POST" action="Quest.jsp">
●この本はおもしろいですか？　
<input type="radio" name="interest" value="1" checked />おもしろい！
<input type="radio" name="interest" value="0" />おもしろくない！　
<input type="submit" value="登録" />
</form>
</body>
</html>

次のプログラム Quest.jsp は、HTMLフォームから入力されたデータを受け取って表示する。HTMLフォームから入力されたデータは、POSTメソッドによりJSP に送信される。このプログラムでは、渡された文字列を getParameterメソッドにより取得して、その内容に応じてメッセージを表示する。メソッドの引数には、入力フィールドの名前を指定する。指定された名前により、どの入力フィールドの値を取得できるかが決定される。

<%@ page contentType="text/html" pageEncoding=="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>アンケート結果</title>
</head>
<body>
<h1>アンケート結果</h1>
<%
String strAns=request.getParameter("interest");
if(Integer.parseInt(strAns)==1){
	out.println("よかったぁ！");
}else{
	out.println("えぇ、なんでぇ？？？");
}
%>
</body>
</html>

たとえば、JSPファイルであるQuest.jspとHTMLファイルであるQuest.html は、Webサーバが動いているホストlocalhostのWebアプリケーションのルートディレクトリ下に格納される。 JSPプログラムを実行するためには、Quest.htmlを実行する。これにより、ブラウザが起動しHTMLフォームが表示される。ブラウザ上からデータを入力して（ラジオボタンを選択し）、送信ボタンを押すと、その文字列に対応したメッセージが表示される。

プログラム Quest.htmlの説明：

フォームを使ったページからの入力は、

<form method="POST" action="Quest.jsp">
●この本はおもしろいですか？　
<input type="radio" name="interest" value="1" checked />おもしろい！
<input type="radio" name="interest" value="0" />おもしろくない！　
<input type="submit" value="登録" />
</form>

によっておこなわれる。

フォームのデータ送信先は、

<form method="POST" action="Quest.jsp">
　～
</form>

により表現する。 <form>タグのmethod属性には、フォームに入力・選択されたデータの送信方法を指定し、ここでは、 POSTメソッドを指定している。 <form>タグのaction属性には、データの送信先を指定し、ここでは、Quest.jspを指定している。

いくつかの選択肢から１つだけを選ぶ形式のコントロール（フォーム部品）は、

<input type="radio" name="interest" value="1" checked />おもしろい！
<input type="radio" name="interest" value="0" />おもしろくない！

によって表現される。<input>タグに「type="radio"」を指定することで、ラジオボタンが表示される。name属性は、コントロールに付ける名前を任意の文字列で指定する。value属性は、そのラジオボタンが選択されたときに送信されるデータで、任意の文字列で指定される。この場合には、name属性が"interest"、value属性が"1"と"0"ですので、選択したボタンによって「interest=1」または「interest=0」というデータが送信される。

プログラム Quest.jspの説明：

Quest.htmlで入力され、Quest.jspに送信されたデータは、以下のスクリプトレット

<%
String strAns=request.getParameter("interest");
if(Integer.parseInt(strAns)==1){
	out.println("よかったぁ！");
}else{
	out.println("えぇ、なんでぇ？？？");
}
%>

により表現される。

String strAns=request.getParameter("interest");

では、Quest.htmlから送信された"interest"というラジオボタンの情報(0または1)を求める。

次に、以下の部分では、

if(Integer.parseInt(strAns)==1){
	out.println("よかったぁ！");
}else{
	out.println("えぇ、なんでぇ？？？");
}

によって条件判断が行われる。具体的には、得られた入力データからif文を用いて判断をおこない、分岐処理を実行する。これによって、入力データに応じて、それに応じた文章が出力される。

フォームからの入力を受け取る (2)

以下のQuest1.htmlでは、Formタグのaction属性の値には、送信ボタンが押された時に、表示されたメニューにより選択された内容が、 JSPプログラムである Quest1.jspにPOSTメソッドにより送信されることを指定する。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>アンケート調査</title>
</head>
<body>
<h1>アンケート調査</h1>
<form method="POST" action="Quest1.jsp">
●あなたの好きな食べ物は？　
<select name="food">
	<option value="3">ラーメン</option>
	<option value="2">カレーライス</option>
	<option value="1">ドリアン</option>
</select>
<input type="submit" value="登録" />
</form>
</body>
</html>

次のプログラム Quest1.jsp は、HTMLフォームから入力されたデータを受け取って表示する。HTMLフォームから入力されたデータは、POSTメソッドによりJSP に送信される。このプログラムでは、渡された文字列を getParameterメソッドにより取得して、その内容に応じてメッセージを表示する。メソッドの引数には、入力フィールドの名前を指定する。指定された名前により、どの入力フィールドの値を取得できるかが決定される。

<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>アンケート結果</title>
</head>
<body>
<h1>アンケート結果</h1>
<%
switch (Integer.parseInt(request.getParameter("food"))) {
	case 3 : out.println("僕も大好きです");break;
	case 2 : out.println("まぁまぁですね");break;
	case 1 : out.println("この世の食べ物とも思えない");break;
}
%>
</body>
</html>

たとえば、JSPファイルであるQuest1.jspとHTMLファイルである Quest1.htmlは、Webサーバが動いているホストlocalhostの Webアプリケーションのルートディレクトリ下に格納される。 JSPプログラムを実行するためには、Quest1.htmlを実行する。これにより、ブラウザが起動しHTMLフォームが表示される。ブラウザ上からデータを入力して（表示されたメニュー項目を選択し）、送信ボタンを押すと、その文字列に対応したメッセージが表示される。

プログラム Quest1.html の説明：

フォームを使ったページからの入力は、

<form method="POST" action="Quest1.jsp">
●あなたの好きな食べ物は？　
<select name="food">
	<option value="3">ラーメン</option>
	<option value="2">カレーライス</option>
	<option value="1">ドリアン</option>
</select>
<input type="submit" value="登録" />
</form>

によって表現される。<select>タグは、メニューの範囲を指定する。<select>～</select>の範囲にメニューを指定することで、メニューが表示される。 name属性は、コントロールの名前を任意の文字列で指定し、ここでは"food"を指定している。 <option>タグは、<select>～</select>の範囲に記述して、メニューの各項目を指定する。value属性は、項目が選択されたときに送信されるデータを指定する。value属性は<select> タグのname属性と合わせることで、「name属性=選択された項目のvalue 属性」という形式でデータ送信がおこなわれる。この場合には、 name属性が"food"、value属性が"1"と"2"と"3"なので、表から選択した項目によって「food=1」、「food=2」、「food=3」のいずれかのデータが送信される。

プログラム Quest1.jsp の説明：

Quest.htmlで入力され、Quest.jspに送信されたデータは、以下のスクリプトレット

<%
switch (Integer.parseInt(request.getParameter("food"))) {
	case 3 : out.println("僕も大好きです");break;
	case 2 : out.println("まぁまぁですね");break;
	case 1 : out.println("この世の食べ物とも思えない");break;
}
%>

によって表現される。

HTMLフォームによって送信されたデータは、

Integer.parseInt(request.getParameter("food"))

によって求められ、数値に変換されている。

この数値に基づいた条件判断処理が、

switch (Integer.parseInt(request.getParameter("food"))) {
	case 3 : out.println("僕も大好きです");break;
	case 2 : out.println("まぁまぁですね");break;
	case 1 : out.println("この世の食べ物とも思えない");break;
}

によっておこわれる。具体的には、得られた入力データからcase文を用いて多分岐選択をおこなう。これによって、入力データに応じて、それに応じた文章が出力される。

問題-1

NetBeansを使って、上のプログラムQuest.htmlと Quest.jsp を実行してみよ。

問題-2

NetBeansを使って、上のプログラムQuest.htmlと Quest.jsp を実行してみよ。ただし、フォームでの通信をGETメソッドとせよ。

問題-3

NetBeansを使って、上のプログラムQuest1.htmlと Quest1.jsp を実行してみよ。

問題-4

NetBeansを使って、上のプログラムQuest1.htmlと Quest1.jsp を実行してみよ。ただし、フォームでの通信をGETメソッドとせよ。

問題-5

NetBeansを使って、以下要件を満足するプログラムQuest2.html とQuest2.jsp を作成・実行せよ。アンケート調査の内容としては、「あなたの好きな食べ物は？」を質問し、コンボボックス（選択ボックス）からは、ラーメン、ハンバーグ、寿司を選択できるものとする。調査結果としては、ラーメンならば「好き」、ハンバーグならば「嫌い」、寿司ならば「大好き」をブラウザに表示するものとする。ただし、フォームでの通信をPOSTメソッドとせよ。

問題-6

2つの数を送信するRequestSend.html(html文)を作成せよ。送信には POSTメソッドを利用すること。次に、フォームから受け取った2つの数の積を求めて、ブラウザに表示する JSPプログラム(RequestReceive.jsp)を作成せよ。ただし、文字列から数字に直すには、IntegerクラスのparseInt()メソッドを利用すること。作成したプログラムを、NetBeansを使って実行してみよ。

システムプログラミング演習

nagai