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

ウハブログ

こんにちは、大学時代にプログラミングを始め、現在はエンジニアをしているuhablog(ウハブログ)です。

今回の記事ではjspのボタンを押した際にonclickでJavaScriptを使って、サーブレットを呼び出す方法を解説していきます。

実際に作っていくのは簡単なおみくじシステムで、画面のボタンを押したら、おみくじ結果が画面に表示されます。

挫折せずにプログラミングを学ぶために必要なこと

僕はプログラミングで挫折した経験があります。

それは周りに聞ける人がいなく、一人でエラーと戦っていたからです。

Freeksは月額10,780円という破格の値段で、現役エンジニアに質問する環境を手に入れることができるプログラミングスクールです。

次のような悩みを少しでも抱えていたら、まずは無料カウンセリングを受けてみてください。

エラーを一人で解消できない

このまま勉強を続けて本当に就職できるかわからない

プログラミングスクールは高額すぎて通えない

申込みは1分でできます。学習する環境にお金を使うというのは良い自己投資になります。
>>Freeksの無料カウンセリングはこちら

今回作るシステム

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

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

ボタンを押した際に「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);

動作確認

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

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

挫折せずにプログラミングを学ぶためには？