教育サーバーのページ
オンラインテキスト目次
システムプログラミング演習

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を指定している。

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

<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.htmlQuest.jsp を実行してみよ。

問題-2

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

問題-3

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

問題-4

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

問題-5

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

問題-6

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

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


nagai