前書き

今回の記事は「SE入門編」シリーズの一部です。完全版はこちらにあります：

今回の記事のソースはGithubにアップロードしております：

1. 前提条件

今回の記事は【番外編】となっており、JqueryとAjaxの知識があれば十分です。

ただし、既に本編で構築したソースの上に、Ajax機能を追加したため、興味をお持ちの方は本編から着手してください。

２. 今回の記事で出来たこと

ログイン画面でユーザーIDを入力すると、DBから入力されたユーザーの情報を取得し、利用言語を画面に表示することが出来た
ログイン初期画面（利用言語＝Englishで表示される）
ログイン画面、存在するユーザーIDを入力する時（利用言語＝Japaneseで表示される）
ログイン画面、存在しないユーザーIDを入力する時（利用言語がEnglishのまま、変わらない）

３. 実装

画面テンプレート:login.htmlに以下のソースを追加する、Jquery、Ajaxの説明は省きます、コメントアウトを確認してください

	$(document).ready(function() {
	    // フォーカスを失ったときのイベントを追加
	    $('#userID').blur(function() {
	        // 入力された値を取得
	        var enteredValue = $(this).val();
	        
	        // Ajaxリクエストを送信
	        $.ajax({
	            url: 'ajaxFindLanguage',  // サーバーのエンドポイントを指定
	            type: 'POST',  // リクエストの種類を指定
	            dataType: 'json',
	            data: { userID: enteredValue },  // サーバーに送信するデータを指定
	            success: function(response) {
	                // サーバーからの応答をコンソールに表示
	                console.log('サーバーからの応答:', response);
	                if(response != "" && response.lang != ""){
	                	// 画面language要素の値を更新する
	                	$("#language").find("option[value='" + response.lang + "']").prop("selected", true);
	                }
	            },
	            error: function(error) {
	                console.log('エラー:', error);
	            }
	        });
	    });
	});

LoginController.javaに以下のメソッドを追加する

	@PostMapping("/ajaxFindLanguage")
	public void findLanguage(HttpServletRequest request, HttpServletResponse response) throws IOException {
		String lang = "";
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");

        String userID = request.getParameter("userID");
        
		if (userID != null && !"".equals(userID)) {
			// ユーザー情報の利用言語を取得する
			User user = userService.selectUserByPK(userID);
			if (user != null) {
				lang = user.getLang();
			}
		}
		
        if (lang != null && !lang.isEmpty()) {
            // サーバー側の処理例（ここでは単純に利用言語をJSON形式で返す）
            String jsonResponse = "{\"success\": true, \"lang\": \"" + lang + "\"}";
            PrintWriter out = response.getWriter();
            out.print(jsonResponse);
        } else {
            String jsonResponse = "{\"success\": false\"}";
            PrintWriter out = response.getWriter();
            out.print(jsonResponse);
        }
	}

Jquery　＋　AJAXを使うことで、画面の一部要素のみ更新することが簡単に実装出来ました、便利ですね。

おわりに

プロジェクト全体のソースコードはGitHubにアップロードしました、ぜひダウンロードして確認してください。

それではまた。