【おみくじ】jspからonclickでサーブレットを呼び出す方法を解説

Java

今回の記事ではjspのボタンを押した際にonclickでJavaScriptを使って、サーブレットを呼び出す方法を解説していきます。
実際に作っていくのは簡単なおみくじシステムで、画面のボタンを押したら、おみくじ結果が画面に表示されます。

このブログでは初心者の方向けにサーブレットとjspでwebアプリを開発する方法をサンプルコード付きで解説しています。ぜひチャレンジしてみてください。

Udemyの動画講座でわかりやすくサーブレットを勉強するicon

今回作るシステム

今回作成するのは次のようにシンプルなおみくじシステムです。
「おみくじを引く」ボタンを表示します。

ボタンを押すと、次のように今日の運勢を表示します。

ボタンを押した際に「onclick」を使って、サーブレットにリクエストを送信するようにしていきます。

jspの作成

まずはjspを作成していきます。
最初の画面のjspから作成していきましょう。

呼び出し側のjsp

呼び出し側のjspではボタンを設置して、そのボタンが押されたらサーブレットにリクエストが飛ぶようにしましょう。

omikuji.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじを引くよ</title>

<script type="text/javascript">
	// サーブレットにリクエストを投げる
	function execute() {
		location.href = "/BlogApplication/omikuji"
	}
</script>
</head>
<body>
	<!-- おみくじを引くためのボタン -->
	<input type="button" value="おみくじを引く" onclick="execute()">
</body>
</html>

まずbodyタグ内でボタンを設置しています。
このボタンのonclick属性で、ボタンが押されたときにjavascriptのexecute()メソッドを実行するように設定しています。

<!-- おみくじを引くためのボタン -->
<input type="button" value="おみくじを引く" onclick="execute()">

次にボタンが押された後に実行されるexecuteメソッドです。
こちらはscritpタグ内に記述することでjavascriptのコードを記述することが出来ます。

location.hrefにパスを代入すると、そのパスにリクエストが投げられます。

<script type="text/javascript">
	// サーブレットにリクエストを投げる
	function execute() {
		location.href = "/BlogApplication/omikuji"
	}
</script>

以上が呼び出し側のjspの内容です。

結果を表示するjsp

次に結果を表示するjspです。

omikuji-result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじ結果表示</title>
</head>
<body>
今日の運勢は<%=request.getAttribute("omikujiResult") %>
</body>
</html>

こちらは結果を表示するだけのシンプルな作りで、リクエストスコープに設定された「omikujiResult」を表示しています。

今日の運勢は<%=request.getAttribute("omikujiResult") %>



サーブレットの作成

最後にサーブレットの作成です。

Omikuji.java

package uhablog;

import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * おみくじサーブレット
 */
@WebServlet("/omikuji")
public class Omikuji extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public Omikuji() {
        super();
    }

    /**
     * 乱数を生成して、おみくじ結果を返却する
     */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Random r = new Random();
		// 0~99の乱数を取得する
		int omikuji = r.nextInt(100);
		
		// おみくじ結果
		String omikujiResult = "";
		
		if(omikuji < 10) {
			omikujiResult = "凶";
		} else if (10 <= omikuji && omikuji < 20) {
			omikujiResult = "末吉";
		} else if (20 <= omikuji && omikuji < 40 ) {
			omikujiResult = "吉";
		} else if (40 <= omikuji && omikuji < 50) {
			omikujiResult = "小吉";
		} else if (50 <= omikuji && omikuji < 60) {
			omikujiResult = "中吉";
		} else if (60 <= omikuji) {
			omikujiResult = "大吉";
		}
		
		request.setAttribute("omikujiResult", omikujiResult);
		request.getRequestDispatcher("/omikuji-result.jsp").forward(request, response);
	}

}

まずはクラス宣言部分で、このサーブレットが呼ばれるパスを設定しています。
先ほどのomikuji.jspでhrefに代入したプロジェクト名以降の値と同じものをここに設定します。

@WebServlet("/omikuji")
public class Omikuji extends HttpServlet {

次にdoGetメソッドに注目します。
このdoGetメソッドで乱数を生成し、おみくじの結果をリクエストスコープに設定しています。

乱数の生成にはRandomクラスのnextIntメソッドを使用しました。

Random r = new Random();
// 0~99の乱数を取得する
int omikuji = r.nextInt(100);

得られた乱数によって、おみくじの結果を判定する箇所です。
かなり優しいおみくじになっています。

// おみくじ結果
String omikujiResult = "";
		
if(omikuji < 10) {
	omikujiResult = "凶";
} else if (10 <= omikuji && omikuji < 20) {
	omikujiResult = "末吉";
} else if (20 <= omikuji && omikuji < 40 ) {
	omikujiResult = "吉";
} else if (40 <= omikuji && omikuji < 50) {
	omikujiResult = "小吉";
} else if (50 <= omikuji && omikuji < 60) {
	omikujiResult = "中吉";
} else if (60 <= omikuji) {
	omikujiResult = "大吉";
}

最後に結果をリクエストスコープに設定して、画面遷移しています。

request.setAttribute("omikujiResult", omikujiResult);
request.getRequestDispatcher("/omikuji-result.jsp").forward(request, response);

動作確認

以上で、コードは完成です。
サーバーを起動し、動作確認してみましょう。

おみくじシステムの完成です。

私はプログラミング学習はオンライン動画学習サービスのUdemyで行うのが
圧倒的におすすめです。
Udemyでは

  • 動画で好きな時間・隙間時間に学べる
  • 一流のエンジニアから教えてもらえる
  • 好きな技術を体系的に学べる
  • 実際に手を動かしながら学ぶことができる
  • セール時であれば1500円〜2000円ほどで購入できる(大半の技術書より安い)
  • 講座自体がアップデートされていくので情報が古くなりにくい

Udemyにはサーブレットを学べる講座iconもあります。
「これからサーブレットを学んでJavaでWebアプリケーションを作れるようになりたい!」という方はチェックしてみてください

タイトルとURLをコピーしました