ページ遷移②

formによるページ遷移

次は、formによるページ遷移を見てみましょう。formによるページ遷移は、post送信、get送信、ともに行うことが可能です。早速、サンプルを見てみることにしましょう。


サンプル(post送信)

では実際に、post送信によるformのサンプルを見てみましょう。以下のサンプルを入力し、実行してみてください。

sample1_from.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample1_from</title>
</head>
<body>
<form action="sample1_to.jsp" method="post">
<table>
	<tr>
		<th colspan="2">名前</th>
	</tr>
	<tr>
		<th>姓</th><td><input type="text" id="family" name="family"/></td>
	</tr>
	<tr>
		<th>名</th><td><input type="text" id="name" name="name"/></td>
	</tr>
</table>
<br/>
<p><b>性別</b>
<input type="radio" id="sex" name="sex" value="男" checked>男
<input type="radio" id="sex" name="sex" value="女" >女
</p>
<br/>
<b>年代</b><br/>
<% String age[] = {"10歳未満","10代","20代","30代","40代以上"}; %>
<select id="age_id" name="age_id">
<%for(int i = 0; i < age.length ; i++){ %>
	<option value="<%= i %>"><%= age[i] %></option>
<%} %>
</select>
<br/>
<br/>
<input type="submit" id="送信" name="送信" value="送信" />
</form>
</body>
</html>

sample1_to.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sample1_to</title>
</head>
<body>
<%
	String age[] = {"10歳未満","10代","20代","30代","40代以上"};
	request.setCharacterEncoding("utf-8");
	String family = request.getParameter("family");
	String name = request.getParameter("name");
	String sex = request.getParameter("sex");
	String age_area = age[Integer.parseInt(request.getParameter("age_id"))];
%>
<b>受信結果</b>
<table>
	<tr>
		<th>姓</th><td><%=family %></td>
	</tr>
	<tr>
		<th>名</th><td><%=name %></td>
	</tr>
	<tr>
		<th>性別</th><td><%=sex %></td>
	</tr>
	<tr>
		<th>年代</th><td><%=age_area %></td>
	</tr>
</table>
<br/>
<a href="sample2_from.jsp">戻る</a>
</body>
</html>

sample1_from.jspが遷移前、sample1_to.jsp遷移後のページになります。したがって、まずはsample1_from.jspを起動してください。URLは、http://localhost:8080/jsp/day4/sample1_from.jspとなります。(図4-1.)

図4-1.sample1_from.jspの実行結果
sample1_from.jspの実行結果

このページからには、「姓」「名」「性別」「年代」という4つの入力項目があります。それぞれに適切な値を入力します。(図4-2.)

図4-2.sample1_to.jspへ文字を入力
sample1_to.jspへの遷移①(リンク処理0をクリック)

各項目に値を入力・設定したのちに「送信」ボタンをクリックすると、sample1_to.jspに遷移し、以下(図4-3.)のようになります。post送信の特徴として、URLの後ろには何もついていません

図4-3.sample1_to.jspへの遷移②(post送信)
sample1_to.jspへの遷移②(リンク処理1をクリック)

入力した値が送信され、受信結果として表示されていることが分かります。「戻る」ボタンを押すと、入力画面に戻ります。

プログラムの仕組み

では、プログラムの仕組みを説明していきましょう。今回、データを送信する部分は、formタグによって囲われています。(sample1_from.jspの10行目~38行目)この部分に記述されたinputタグ、およびselectタグの中身のデータが、送信されます。method属性にpostが指定されているので、ここの部分のデータは、post送信されます。

formタグ
<form action="sample1_to.jsp" method="post">

送信ボタンは、typeにsubmitを押すことにより実現されます。これを押すと、formタグのaction属性に指定されたURL、すなわち今回の場合はsample1_to.jspにジャンプします。その際、formタグに囲まれた入力データは、送信されます。

送信されたデータは、受信側(sample1_to.jsp)では、request.getParameterにより、受信されます。パラメータとして、送信側のタグの名前を指定することにより、それぞれ対応するデータを取得できます。(図4-4.)

図4-4.post送信とその受信
post送信とその受信

数値のデータを取得する

基本的に、送信するデータは、Stringとして送信されます。しかし、場合によっては数値を送りたい場合もあるでしょう。そういう場合はどうすればよいのでしょうか?その場合は、対応するラッパクラスを利用します。たとえば整数の場合は、Integerクラスを用います。

sample1_from.jspの16行目の処理
Integer.parseInt(request.getParameter("age_id"))

このような処理を用いれば、文字列型のデータを整数の値に変更できます。その他のタイプのデータに関しても同様です。

get送信に切り替えてみる

このサンプルはpost送信ですが、簡単にget送信に切り替えることができます。sample1_from.jspの37行目を、以下の様に変更してみてください。

post送信をget送信に変換
<form action="sample1_to.jsp" method="get">

見ればわかるとおり、methodをpostからgetに切り替えただけです。それでは、実際にこれで再びこのサンプルを実行してみましょう。実行したら、post送信と同様に、各パラメータを入力してみましょう。(図4-5.)

図4-5.sample1_to.jspへ文字を入力(get送信)
sample1_to.jspへの遷移①(リンク処理0をクリック)

各項目に値を入力・設定したのちに「送信」ボタンをクリックすると、sample1_to.jspに遷移し、以下(図4-6.)のようになります。get送信の特徴として、URLの後ろに様々な値が付属しています。また、日本語部分が文字化けしてしまっています。

図4-6.sample1_to.jspへの遷移②(get送信)
sample1_to.jspへの遷移②(get送信)

このように、実行結果に違いが表れることが分かります。