サーブレット&JSPの基本｜hiddenフィールドとURLパラメータ
画面には見えないデータも送信できる。hiddenフィールドとURLパラメータで、プログラムに必要な値を渡そう
フォームを使うと、利用者が入力した名前や選択した項目をリクエストパラメータとしてサーバへ送信できます。
しかし、Webアプリケーションを作っていると、利用者が画面で直接入力していない値も、サーバ側のプログラムへ送りたい場面があります。
たとえば、どの画面から送信されたのか、どの商品に対する操作なのか、どの処理を実行したいのか、といった情報です。利用者に入力してもらう必要はないけれど、サーバ側では必要になるデータがあります。
このようなときに使える方法が、hiddenフィールドとURLパラメータです。
hiddenフィールドを使うと、フォームの中に画面には表示されない入力部品を置き、その値を送信できます。また、リンクのURLの末尾にリクエストパラメータを付けることで、リンクをクリックしたときに決まった値をサーバへ送ることもできます。
この記事では、開発者があらかじめ指定した値を、リクエストパラメータとしてサーバへ送る2つの方法を解説します。
開発者がプログラムへデータを送る場面
フォームでは、利用者が入力した値を送信するのが基本です。
しかし、実際のWebアプリケーションでは、利用者が入力していない値も一緒に送りたいことがあります。
たとえば、画面上では申し込むボタンしか見えていなくても、内部的には次のような値を送信したい場合があります。
| 送りたい値 | 目的の例 |
|---|---|
| eventId | どのイベントに申し込むかを識別する |
| mode | 新規登録か更新かを区別する |
| category | どのカテゴリの一覧を表示するかを指定する |
| page | 何ページ目を表示するかを指定する |
これらの値は、利用者が毎回入力するものではありません。開発者があらかじめHTMLの中に用意しておき、送信時やリンククリック時にサーバへ渡します。
このような値も、送信されるときはリクエストパラメータとして扱われます。
2つの方法で値を送信できる
開発者があらかじめ指定した値をサーバへ送るには、主に次の2つの方法があります。
| 方法 | 使い方 |
|---|---|
| hiddenフィールドを使う | フォーム内に画面に表示されない入力部品を置く |
| URLの末尾に指定する | リンク先URLにリクエストパラメータを付ける |
hiddenフィールドは、フォーム送信と一緒に値を送りたいときに使います。
URLの末尾に指定する方法は、リンクをクリックしたときに値を送りたいときに使います。
どちらも、送られた先ではrequest.getParameterを使って値を取得できます。
図1：開発者が指定した値をリクエストパラメータとして送る
この図から分かること
利用者が画面で入力していない値でも、開発者があらかじめHTMLの中に用意しておけば、サーバへ送信できます。
hiddenフィールドはフォームの中に配置し、送信ボタンをクリックしたときに他の入力値と一緒に送られます。URLパラメータはリンク先のURLに付けておき、リンクをクリックしたときに送られます。
どちらの方法でも、サーバ側ではリクエストパラメータとして扱えます。
方法① hiddenフィールドを使用する
hiddenフィールドは、フォームの中に配置する入力部品の1つです。
名前のとおり、画面には表示されません。利用者からは見えませんが、フォームを送信すると、その値は他のフォーム部品と一緒にサーバへ送られます。
hiddenフィールドの基本形
<input type="hidden" name="名前" value="値">type属性にhiddenを指定すると、画面には表示されない入力部品になります。
name属性には、リクエストパラメータの名前を指定します。value属性には、送信したい値を指定します。
hiddenフィールドの属性
| 属性 | 役割 |
|---|---|
| type属性 | hiddenを指定して画面に表示しない部品にする |
| name属性 | 送信するリクエストパラメータの名前を指定する |
| value属性 | 送信する値を指定する |
たとえば、name属性にeventId、value属性にE100を指定すると、送信時にはeventId=E100というリクエストパラメータが送られます。
サーバ側では、request.getParameter("eventId")を使ってE100を取得できます。
hiddenフィールドを使ったフォームの例
ここでは、研修イベントへの申し込みフォームを例にします。
利用者が画面で入力するのは名前だけです。しかし、サーバ側では、どのイベントへの申し込みなのかも知る必要があります。
そこで、画面には表示されないhiddenフィールドとしてeventIdを用意します。
hiddenフィールドを持つ申し込みフォームの例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>研修イベント申し込み</title>
</head>
<body>
<form action="EntryServlet" method="get">
<input type="hidden" name="eventId" value="E100">
名前：<input type="text" name="userName"><br>
<input type="submit" value="申し込む">
</form>
</body>
</html>このフォームでは、画面に表示されるのは名前の入力欄と申し込むボタンです。
しかし、フォームの中には次のhiddenフィールドが入っています。
<input type="hidden" name="eventId" value="E100">このため、申し込むボタンをクリックすると、userNameの値だけでなく、eventId=E100も一緒に送信されます。
たとえば、名前に青山直人と入力して送信した場合、次のようなリクエストパラメータが送られます。
eventId=E100&userName=青山直人サーバ側では、次のように値を取得できます。
String eventId = request.getParameter("eventId");
String userName = request.getParameter("userName");hiddenフィールドは画面に表示されませんが、フォーム送信時にはリクエストパラメータとして送られることがポイントです。
hiddenフィールドはformタグの中に書く
hiddenフィールドはフォーム部品の1つなので、送信したい場合はformタグの中に書きます。
formタグの外に書いてしまうと、そのフォームの送信対象になりません。
hiddenフィールドの配置
| 配置場所 | 送信されるか |
|---|---|
| formタグの中 | 送信される |
| formタグの外 | そのフォームでは送信されない |
hiddenフィールドは画面に見えないため、配置場所の間違いに気づきにくいことがあります。
値がサーバ側で取得できない場合は、name属性やvalue属性だけでなく、hiddenフィールドがformタグの中に入っているかも確認しましょう。
図2：hiddenフィールドは画面に見えないが送信される
この図から分かること
hiddenフィールドは、ブラウザ画面には表示されないフォーム部品です。
利用者には見えませんが、formタグの中に置かれていれば、送信ボタンをクリックしたときに他の入力値と一緒に送られます。
たとえば、eventId=E100のような値をhiddenフィールドとして用意しておくと、サーバ側ではrequest.getParameter("eventId")で取得できます。
方法② リクエスト先URLの末尾に指定する
もう1つの方法は、リンク先URLの末尾にリクエストパラメータを付ける方法です。
aタグのhref属性に指定するURLの後ろに?を付け、その後ろに名前=値の形でリクエストパラメータを書きます。
URLの末尾に指定する基本形
<a href="リクエスト先?名前=値">リンク文字</a>たとえば、ItemServletへitemId=I200という値を送信したい場合は、次のように書きます。
<a href="ItemServlet?itemId=I200">詳細を見る</a>このリンクをクリックすると、ItemServletへGETリクエストが送られます。そのとき、itemId=I200というリクエストパラメータも一緒に送信されます。
サーバ側では、次のように取得できます。
String itemId = request.getParameter("itemId");この方法では、フォームを使わなくても、リンクをクリックしただけで決まった値をサーバへ送れます。
複数のリクエストパラメータを付ける
URLの末尾に複数のリクエストパラメータを付けたい場合は、&でつなぎます。
複数指定の基本形
<a href="リクエスト先?名前1=値1&名前2=値2">リンク文字</a>たとえば、itemId=I200とcategory=bookを同時に送りたい場合は、次のように書きます。
<a href="ItemServlet?itemId=I200&category=book">書籍の詳細を見る</a>このリンクをクリックすると、次の2つのリクエストパラメータが送られます。
| 名前 | 値 |
|---|---|
| itemId | I200 |
| category | book |
サーバ側では、request.getParameter("itemId")とrequest.getParameter("category")で、それぞれの値を取得できます。
URLパラメータを使ったリンクの例
ここでは、商品一覧から詳細ページへ移動するリンクを例にします。
利用者が詳細を見るをクリックすると、ItemServletへ商品IDとカテゴリを送信します。
URLパラメータを持つリンクの例
ファイル名： item-list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品一覧</title>
</head>
<body>
<p>Java入門テキスト</p>
<a href="ItemServlet?itemId=I200&category=book">詳細を見る</a>
</body>
</html>このHTMLでは、詳細を見るリンクのhref属性に次のURLを指定しています。
ItemServlet?itemId=I200&category=bookリンクをクリックすると、ItemServletへGETリクエストが送られます。
そのとき、itemId=I200とcategory=bookという2つのリクエストパラメータも一緒に送信されます。
サーバ側では、次のように値を取得できます。
String itemId = request.getParameter("itemId");
String category = request.getParameter("category");この方法は、一覧画面から詳細画面へ移動するときのように、リンク先へ何らかの識別情報を渡したい場合に使えます。
URLパラメータではdoGetが実行される
リンクをクリックしてリクエストする場合、リクエストメソッドはGETになります。
そのため、URLの末尾にリクエストパラメータを付けてサーブレットへ送信した場合、リンク先のサーブレットクラスではdoGetメソッドが実行されます。
URLパラメータと実行メソッド
| 操作 | リクエストメソッド | サーブレット側で実行されるメソッド |
|---|---|---|
| リンクをクリックする | GET | doGet |
| ブラウザのアドレスバーにURLを入力する | GET | doGet |
リンク先のサーブレットにdoGetメソッドがない場合、正しく処理できないことがあります。
URLパラメータを使う場合は、リンク先のサーブレットでdoGetメソッドを用意することを意識しましょう。
図3：URLの末尾にリクエストパラメータを付ける
この図から分かること
リンクのURLの末尾に?を付け、その後ろに名前=値の形でリクエストパラメータを書けば、リンクをクリックしたときに値をサーバへ送れます。
複数の値を送る場合は、&でつなぎます。
リンククリックによるリクエストはGETリクエストになるため、リンク先のサーブレットではdoGetメソッドが実行されます。サーバ側では、hiddenフィールドの場合と同じようにrequest.getParameterで値を取得できます。
hiddenフィールドとURLパラメータの使い分け
hiddenフィールドとURLパラメータは、どちらも開発者があらかじめ指定した値をリクエストパラメータとして送る方法です。
ただし、使う場面が少し異なります。
2つの方法の違い
| 方法 | 使う場面 | 値が送られるタイミング |
|---|---|---|
| hiddenフィールド | フォーム送信と一緒に値を送りたいとき | 送信ボタンをクリックしたとき |
| URLパラメータ | リンククリックで値を送りたいとき | リンクをクリックしたとき |
hiddenフィールドは、フォームの送信データに値を追加したいときに向いています。
URLパラメータは、リンク先へ識別情報などを渡したいときに向いています。
どちらの場合も、サーバ側ではリクエストパラメータとして受け取ります。つまり、取得方法はrequest.getParameterです。
送信される形はリクエストパラメータ
hiddenフィールドで送っても、URLの末尾に指定しても、サーバ側に届くとリクエストパラメータとして扱われます。
サーバ側での取得方法
| 送信方法 | 送られる例 | 取得方法 |
|---|---|---|
| hiddenフィールド | eventId=E100 | request.getParameter("eventId") |
| URLパラメータ | itemId=I200 | request.getParameter("itemId") |
| URLパラメータを複数指定 | itemId=I200&category=book | request.getParameter("itemId")、request.getParameter("category") |
フォームから送られた値も、hiddenフィールドの値も、URLの末尾に付けた値も、名前=値の形式で送られる点は同じです。
この考え方が分かると、フォーム送信とリンククリックのどちらでも、同じようにサーバ側で値を取得できることが理解しやすくなります。
hiddenフィールドで確認したいポイント
hiddenフィールドを使うときは、次の点を確認しましょう。
| 確認項目 | 内容 |
|---|---|
| type属性 | hiddenになっているか |
| name属性 | 取得時に使う名前を指定しているか |
| value属性 | 送信したい値を指定しているか |
| formタグ | hiddenフィールドがformタグの中にあるか |
| 送信先 | formタグのaction属性が正しいか |
hiddenフィールドは画面に表示されないため、入力画面だけを見ても存在を確認できません。
コード上で、name属性とvalue属性が正しく指定されているか、formタグの中に置かれているかを確認することが大切です。
URLパラメータで確認したいポイント
URLの末尾にリクエストパラメータを指定するときは、?と&の使い方を確認します。
| 確認項目 | 内容 |
|---|---|
| ? | URLとリクエストパラメータの区切りに使う |
| 名前=値 | 1つのリクエストパラメータを表す |
| & | 複数のリクエストパラメータをつなぐ |
| doGet | リンク先のサーブレットで実行される |
| getParameter | サーバ側で値を取得する |
1つ目のリクエストパラメータの前には?を付けます。
2つ目以降のリクエストパラメータは&でつなぎます。
たとえば、ItemServletにitemIdとcategoryを送る場合は、次のように指定します。
<a href="ItemServlet?itemId=I200&category=book">詳細を見る</a>このリンクをクリックすると、ItemServletへGETリクエストが送られ、itemIdとcategoryを取得できるようになります。
開発者が指定した値を送るときの考え方
hiddenフィールドとURLパラメータは、利用者が直接入力していない値をサーバ側へ渡したいときに役立ちます。
フォーム送信に含めたい値はhiddenフィールドで送ります。リンククリック時に渡したい値はURLの末尾に指定します。
| 目的 | 適した方法 |
|---|---|
| フォーム送信と一緒にイベントIDを送りたい | hiddenフィールド |
| 申し込みボタンと一緒に処理モードを送りたい | hiddenフィールド |
| 商品一覧のリンクから商品IDを送りたい | URLパラメータ |
| カテゴリ別リンクからカテゴリIDを送りたい | URLパラメータ |
どちらの方法でも、送信先のサーブレットやJSPではrequest.getParameterを使って値を取得できます。
画面には見えない値や、リンクに含めた値も、サーバ側では通常のリクエストパラメータとして扱われます。これを理解しておくと、より本格的なWebアプリケーションを作るための準備が整っていきます。