🦔
【JavaServlet・JSP】新入社員研修向け！テキストボックスに入力された値を受け取る方法(EL式)
概要
入力画面に値を入力したら結果画面で表示されるサンプルを作成します
入力画面作成
InputServletを作成し、doGetメソッドに以下を記述します
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//input.jspを表示する
request.getRequestDispatcher("WEB-INF/jsp/input.jsp").forward(request, response);
}
WEB-INF/jspフォルダ内にinput.jspを作成し、以下を記述します
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>入力画面</h1>
<form action="InputServlet" method="post">
<p>
名前を入力<input type="text" name="name">
</p>
<p>
年齢を入力<input type="text" name="age">
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
下記action属性の値は、InputServletの「@WebServlet("/InputServlet")」と合わせる
<form action="InputServlet" method="post">
結果画面作成
InputServletのdoPostメソッドに以下を記述します
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//input.jspのテキストボックスに入力された値を受け取る
//nameやageは、input.jspのテキストボックスのname属性の値と同じにする
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
//次に表示するJSPで値を表示したいのでリクエストスコープ(次の画面に遷移したら渡された値は消滅)に格納
request.setAttribute("name", name);
request.setAttribute("age", age);
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/jsp/result.jsp");
dispatcher.forward(request, response);
}
WEB-INF/jspフォルダ内にresult.jspを作成し、以下を記述します
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>結果画面</h1>
<p>名前：${name }</p>
<p>年齢：${age}</p>
</body>
</html>
重要！処理の流れ
1．「http://localhost:8080/ZennServletJSP/InputServlet」 にアクセス
2．InputServletのdoGetメソッドが動く
3．input.jsp(入力画面)が表示されるので、名前と年齢を入力し、送信ボタンをクリック
4．InputServletのdoPostメソッドが動く
5．result.jsp(結果画面が表示される)
軽くまなびたいあなたは・・・
がっつりまなびたいあなたは・・・
↓のリンクで購入されると、私にうれしいことが起こります！
Udemyで講座を公開中！
X(旧Twitter)
Zenn 本
Youtube
Discussion