Java ServletとJSPの連携(フォーム情報によりページ遷移を変更する)の手順を備忘録。
仕様説明
フォームに名前を入力した場合→成功ページへ遷移
フォームに名前を未入力の場合→エラーページへ遷移
JSPページにinclude()ディレクティブを使い全ページにヘッダとフッタを付ける。
手順スタート
デフォルトプロジェクトを右クリック→新規→サーブレットをクリック。
新規サーブレット ウインドウが開くと下記の通りに記入および選択をする。
Javaパッケージ</th>
<td class=des>servlet</td>
</tr>
クラス名</th>
<td class=des>JspServlet</td>
</tr>
スーパークラス</th>
<td class=des>javax.servlet.http.HttpServlet</td>
</tr>
</div>
完了ボタンを押下
SessionServlet.javaの編集
[code lang=java]
package servlet;
import java.io.IOException;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* サーブレット処理
*/
public class JspServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* コンストラクタ
*/
public JspServlet() {
super();
}
/**
* doGet
*
* @param request
* @param response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// エンコーディング
response.setContentType(text/html; charset=Windows-31J);
request.setCharacterEncoding(Windows-31J);
// フォームデータより名前を取得
String name = request.getParameter(yourName);
// サーブレットコンテキストを取得
ServletContext sc = getServletContext();
// 次に遷移するページ(初期値)
String nextPage = /servlet/success.jsp;
// 未入力チェック
if (name.length() == 0) {
nextPage = /servlet/error.jsp;
}
// ページ遷移
sc.getRequestDispatcher(nextPage).forward(request, response);
}
}
[/code]
WebContentフォルダの下にservletフォルダを作成する
デフォルトプロジェクトを右クリック→新規→JSPをクリック。
新規 JavaServerPage ウインドウが開くと下記の通りに記入する。
ファイル名</th>
<td class=des>hedder.jsp</td>
</tr>
</div>
完了ボタンを押下
hedder.jspの編集
[code lang=html]
<%@ page pageEncoding="Windows-31J" %>
<div align="center">
<h1>JSP サーブレット演習</h1>
</div>
<hr />
[/code]
デフォルトプロジェクトを右クリック→新規→JSPをクリック。
新規 JavaServerPage ウインドウが開くと下記の通りに記入する。
ファイル名</th>
<td class=des>fotter.jsp</td>
</tr>
</div>
完了ボタンを押下
fotter.jspの編集
[code lang=html]
<%@ page pageEncoding="Windows-31J" %>
<hr />
<div align="center">
Copyright 2010 All Rights Reserved.
</div>
[/code]
デフォルトプロジェクトを右クリック→新規→JSPをクリック。
新規 JavaServerPage ウインドウが開くと下記の通りに記入する。
ファイル名</th>
<td class=des>input.jsp</td>
</tr>
</div>
完了ボタンを押下
input.jspの編集
[code lang=html]
<%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="windows-31j"%>
Webブラウザから入力処理
<%@ include file="/servlet/hedder.jsp" %>
<h1>お名前を入力してください。</h1>
<form action="/HelloServlet/JspServlet" method="get"><input name="yourName" type="text" />
<input type="submit" value="送信" /></form><%@ include file="/servlet/fotter.jsp" %>
[/code]
デフォルトプロジェクトを右クリック→新規→JSPをクリック。
新規 JavaServerPage ウインドウが開くと下記の通りに記入する。
ファイル名</th>
<td class=des>success.jsp</td>
</tr>
</div>
完了ボタンを押下
success.jspを下記の通りに記入
[code lang=html]
<%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="windows-31j"%>
<% String getName = request.getParameter("yourName"); String name = new String(getName.getBytes("8859_1"), "JISAutoDetect"); %>
入力成功！
<%@ include file="/servlet/hedder.jsp" %>
<h2>入力成功！</h2>
<%= name %>さん、ご入力ありがとうございました。
<%@ include file="/servlet/fotter.jsp" %>
[/code]
デフォルトプロジェクトを右クリック→新規→JSPをクリック。
新規 JavaServerPage ウインドウが開くと下記の通りに記入する。
ファイル名</th>
<td class=des>error.jsp</td>
</tr>
</div>
完了ボタンを押下
error.jspの編集
[code lang=html]
<%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="windows-31j"%>
<% String title = "未入力です。 "; %>
<%= title %>
<%@ include file="/servlet/hedder.jsp" %>
<h2><%= title %></h2>
<a href="/HelloServlet/servlet/input.jsp">こちら</a>から入力して下さい。
<%@ include file="/servlet/fotter.jsp" %>
[/code]
Tomcatを立ち上げ、Webブラウザより<a href=http://localhost:8080/HelloServlet/servlet/input.jsp>http://localhost:8080/HelloServlet/servlet/input.jsp</a>にアクセスする。
<img src=
入力欄に「はやと」と入力し送信ボタンを押下する。
成功画面に遷移しました。
再度 Webブラウザより<a href=http://localhost:8080/HelloServlet/servlet/input.jsp>http://localhost:8080/HelloServlet/servlet/input.jsp</a>にアクセスする。
入力欄を未入力とし送信ボタンを押下する。
<img src=
エラー画面に遷移しました。
これで JSPとJavaサーブレットで画面の遷移が出来ました。
※ <a href=http://mergedoc.sourceforge.jp/>MergeDoc Project</a>よりEclipse 3.5 Galileo Pleiades All in Oneを使用しています。
</ol>
最新記事 by hayato (全て見る)
- Uberで楽々！🚖✨ リオでキリスト像の絶景🌄と極上ステーキ🥩🍽️を味わう🇧🇷🌞 – 2024年7月27日
- リオへの道のりがワイルドすぎる⁉️🚖 サンタクルス発✈️南米での航空券＆Uber体験💥✨ – 2024年7月26日
- 2時間の飛行機遅延!? ボリビア🇧🇴ラパスの絶景ロープウェイ🚡と激安グルメ🍝を味わった旅🚌 – 2024年7月25日
コメントを残す