前書き
今回の記事は「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にアップロードしました、ぜひダウンロードして確認してください。
それではまた。