データをフォームの隠し属性に埋め込む

次のページに送信したいデータをフォームの隠し属性に保存する方法です。次のようにHTMLタグで指定します。

<input type="hidden" name="[data_name]" value="[渡したいデータ]">

Webフォームに2つの数字を入力し、隠し属性にセットされた内容に応じて計算結果を表示するWebアプリケーションを作成してみましょう。

○　ファイル

プロジェクトに次のようなServletを追加してください。

パッケージ名 test.servlet
クラス名 SendHiddenData
スーパークラス名 javax.servlet.http.HttpServlet

サンプルダウンロード

○　プログラム

doGetメソッドを追加して、次のようにプログラムを入力してください。

SendHiddenData.java

  1. package test.servlet;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. @WebServlet("/sendhiddendata")
  13. public class SendHiddenData extends HttpServlet {
  15.     @Override
  16.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  17.         //クライアントへの出力準備をする
  18.         resp.setContentType("text/html;charset=utf-8");
  19.         PrintWriter pw = resp.getWriter();
  20.         
  21.         //クライアントにHTMLタグを書き出し
  22.         pw.println("<html>");
  23.         pw.println("<head>");
  24.         pw.println("<title>計算機</title>");
  25.         pw.println("</head>");
  26.         pw.println("<body>");
  27.         pw.println(" <form action='receivehiddendata' method='POST'>");
  28.         pw.println(" 数字を2つ入力してください。<br>");
  29.         pw.println(" 数字1：<input type='number' name='num1'><br>");
  30.         pw.println(" 数字2：<input type='number' name='num2'><br>");
  31.         pw.println(" <input type='hidden' name='command' value='*'>");
  32.         pw.println(" <input type='submit'>");
  33.         pw.println(" </form>");
  34.         pw.println("</body>");
  35.         pw.println("</html>");
  36.     }
  38. }

○　ファイル

プロジェクトに次のようなServletを追加してください。

パッケージ名 test.servlet
クラス名 ReceiveHiddenData
スーパークラス名 javax.servlet.http.HttpServlet

サンプルダウンロード

○　プログラム

doPostメソッドを追加して、次のようにプログラムを入力してください。

ReceiveHiddenData.java

  1. package test.servlet;
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  12. @WebServlet("/receivehiddendata")
  13. public class ReceiveHiddenData extends HttpServlet {
  15.     @Override
  16.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  17.         //受信するデータの文字コードを設定する
  18.         req.setCharacterEncoding("utf-8");
  19.         
  20.         //送信されたデータを取得する
  21.         int num1 = Integer.parseInt(req.getParameter("num1"));
  22.         int num2 = Integer.parseInt(req.getParameter("num2"));
  23.         String command = req.getParameter("command");
  25.         //クライアントへの出力準備をする
  26.         resp.setContentType("text/html;charset=utf-8");
  27.         PrintWriter pw = resp.getWriter();
  28.         
  29.         //取得したコマンドに応じて計算する
  30.         int result = 0;
  31.         switch(command) {
  32.             case "+":
  33.                 result = num1 + num2;
  34.                 break;
  35.             case "-":
  36.                 result = num1 - num2;
  37.                 break;
  38.             case "*":
  39.                 result = num1 * num2;
  40.                 break;
  41.             case "/":
  42.                 result = num1 / num2;
  43.                 break;
  44.         }
  45.         
  46.         //クライアントにHTMLタグを書き出し
  47.         pw.println("<html>");
  48.         pw.println("<head>");
  49.         pw.println("<title>計算結果</title>");
  50.         pw.println("</head>");
  51.         pw.println("<body>");
  52.         pw.println(" 計算結果：" + result);
  53.         pw.println("</body>");
  54.         pw.println("</html>");
  55.     }
  57. }

○　実行結果

次のURLを入力して実行してみましょう。

http://localhost:8080/WebApp/sendhiddendata

実行結果
実行結果

○　解説

SendHiddenData.javaの31行目で、フォームの隠し属性に「*」をセットしています。この状態のフォームがWebブラウザーに表示されます。数字を2つ入力後送信ボタンが押されることで、入力された数字と、あらかじめセットしておいた「*」が次のページに送られます。

ReceiveHiddenData.javaの21~23行目では、入力した2つのデータと隠し属性で指定した「*」を取得しています。31~44行目では、隠し属性で指定したコマンドに応じて計算されます。

このように、送信元のプログラムでフォームの隠し属性に次の処理で使うデータを埋め込んでおき、次回のリクエストの時にサーバーにデータを送り、処理させることができます。

データの流れ
データの流れ

前へ   次へ