ページ遷移②
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の実行結果 |
---|
このページからには、「姓」「名」「性別」「年代」という4つの入力項目があります。それぞれに適切な値を入力します。(図4-2.)
図4-2.sample1_to.jspへ文字を入力 |
---|
各項目に値を入力・設定したのちに「送信」ボタンをクリックすると、sample1_to.jspに遷移し、以下(図4-3.)のようになります。post送信の特徴として、URLの後ろには何もついていません。
図4-3.sample1_to.jspへの遷移②(post送信) |
---|
入力した値が送信され、受信結果として表示されていることが分かります。「戻る」ボタンを押すと、入力画面に戻ります。
プログラムの仕組み
では、プログラムの仕組みを説明していきましょう。今回、データを送信する部分は、formタグによって囲われています。(sample1_from.jspの10行目~38行目)この部分に記述されたinputタグ、およびselectタグの中身のデータが、送信されます。method属性にpostが指定されているので、ここの部分のデータは、post送信されます。
formタグ送信ボタンは、typeにsubmitを押すことにより実現されます。これを押すと、formタグのaction属性に指定されたURL、すなわち今回の場合はsample1_to.jspにジャンプします。その際、formタグに囲まれた入力データは、送信されます。
送信されたデータは、受信側(sample1_to.jsp)では、request.getParameterにより、受信されます。パラメータとして、送信側のタグの名前を指定することにより、それぞれ対応するデータを取得できます。(図4-4.)
図4-4.post送信とその受信 |
---|
数値のデータを取得する
基本的に、送信するデータは、Stringとして送信されます。しかし、場合によっては数値を送りたい場合もあるでしょう。そういう場合はどうすればよいのでしょうか?その場合は、対応するラッパクラスを利用します。たとえば整数の場合は、Integerクラスを用います。
sample1_from.jspの16行目の処理このような処理を用いれば、文字列型のデータを整数の値に変更できます。その他のタイプのデータに関しても同様です。
get送信に切り替えてみる
このサンプルはpost送信ですが、簡単にget送信に切り替えることができます。sample1_from.jspの37行目を、以下の様に変更してみてください。
post送信をget送信に変換見ればわかるとおり、methodをpostからgetに切り替えただけです。それでは、実際にこれで再びこのサンプルを実行してみましょう。実行したら、post送信と同様に、各パラメータを入力してみましょう。(図4-5.)
図4-5.sample1_to.jspへ文字を入力(get送信) |
---|
各項目に値を入力・設定したのちに「送信」ボタンをクリックすると、sample1_to.jspに遷移し、以下(図4-6.)のようになります。get送信の特徴として、URLの後ろに様々な値が付属しています。また、日本語部分が文字化けしてしまっています。
図4-6.sample1_to.jspへの遷移②(get送信) |
---|
このように、実行結果に違いが表れることが分かります。