分ける前のjspについて
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<script type="text/javascript"> function searchForm() { if(window.location.hash){ var identificationNumber = window.location.hash.replace('#', ''); var reqParam = {"identificationNumber" : identificationNumber}; $.ajax({ type : "POST", contentType : "application/json;charset=utf-8", url : "${pageContext.request.contextPath}/manage/search_result", data: JSON.stringify(reqParam), dataType : "json", success : function(result) { $("#headTable").html(''); $("#bodyTable").html(''); $("#search").html(''); var results = result.tableColumList; var tr = document.createElement('tr'); $.each(results , function(i){ var cell = document.createElement("th"); var cellText = document.createTextNode(results[i].columnName); cell.appendChild(cellText); tr.appendChild(cell); }); document.getElementById('headTable').appendChild(tr); var row = document.createElement('tr'); $.each(results , function(i){ var cell = document.createElement("td"); var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('name', 'tableValue'); cell.appendChild(input); row.appendChild(cell); }); document.getElementById('bodyTable').appendChild(row); var searchInput = document.createElement("input"); searchInput.setAttribute('type', 'submit'); searchInput.setAttribute('id', 'searchButton'); searchInput.setAttribute('class', 'btn btn-primary'); searchInput.setAttribute('onclick', 'searchData()'); searchInput.setAttribute('value', '検索'); document.getElementById("search").appendChild(searchInput); }, error : function() { alert('error'); } }); } } ['hashchange', 'load'].forEach(event => window.addEventListener(event, searchForm)); </script> <body> <div class="table"> <br> <br> <div class="container"> <table border="1" class="table table-striped table-bordered"> <thead class="thead-dark" id="headTable"> </thead> <tbody id="bodyTable"> </tbody> </table> <div id="search" style="float:right;"></div> <br> <br> </div> </body> |
このようにjsp内にスクリプトを書いて、そこでajaxを使って非同期にテーブルを作っています。
処理としては、オーナー、テーブル情報などのテーブル名を押下すると
非同期で上記のようにテーブルのカラムごとの検索条件入力画面が出力されるというものです。
jsを別けた
行った内容
下記のようなディレクトリにjsファイルを作り、先ほどのJavaScriptの記述を単純に置きました。
|
1 |
C:\pleiades\workspace\HappyBeautyManagerByDm\src\main\webapp\resources\js\search.js |
jsp内で変わったことといえば、作ったjsファイルを参照するための記述を１行いれました。
（もちろんJavaScriptの記述は消します）
|
1 |
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/search.js"></script> |
エラー内容
しかし、エラーになってしまいます。
ajaxのerrorだった場合の処理でアラートがでているので、jsファイルとの連動ができています。
|
1 |
error : function() { alert('error'); } |
ブラウザの開発ツールのログをみると、ajaxが参照すべきコントローラのメソッドへのパスがおかしいことになっていることが分かります。
ただJavaScriptの記述をファイル分けしただけなのに、なぜこのようにエラーになってしまうのでしょう？
今回の問題点と解決策
原因のパス
|
1 |
http://localhost:8080/HappyBeautyManager/login/$%7BpageContext.request.contextPath%7D/manage/search_result |
正しく、原因は正しいURLが生成できないことにあります。
原因①：${pageContext.request.contextPath}はEL式。EL式はJSP2.0のプラグイン。
なのでjsファイル内で記述しても「$%7BpageContext.request.contextPath%7D」というような風になり、jsファイルでは使えません。
原因②：コントローラを別けて作っているので、正しい位置にメソッドが置けていない。
これに関しては下記の解決法を見ていただいたほうが、理解しやすいと思うので
ここでは詳しい解説はしません。
解決方法
◆元のコントローラ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
/** * ログイン画面のコントローラ * * @author jini and elmu * */ @Controller @RequestMapping(value = "/login") public class LoginController { @Autowired HappyBeautyManagerService happyBeautyManagerService; /** * ログイン画面を開くためのメソッド * * @param model model * @return ログイン画面jspのファイル名 */ @RequestMapping(value = "/init") public String home(Model model) { // ログイン画面formをアトリビュートする model.addAttribute("loginForm", new LoginForm()); return "login"; } /** * ログインプロセスを行うメソッド * * @param loginform ログイン画面から入力された値が入っているフォームクラス * @param result 入力チェック結果 * @param session session * @param model model * @return ログイン画面や検索画面jspのファイル名 */ @RequestMapping(value = "/loginProcess") public String loginProcess(@Valid @ModelAttribute("loginForm") LoginForm loginForm, BindingResult bindingResult, Model model, HttpSession session) { // 管理者情報を初期化 Manager manager = null; // 入力情報に誤りがある場合、ログイン画面に差し戻す if (bindingResult.hasErrors()) { return "login"; } // セッションに管理者情報がない場合 if (session.getAttribute("userInfo") == null) { // ログイン画面で入力された管理者id String id = loginForm.getId(); // ログイン画面で入力された管理者password String password = loginForm.getPassword(); // ログイン情報でDBで照会し、それに該当するユーザー情報を返す manager = happyBeautyManagerService.getManager(id, password); // ユーザー情報が取得できない場合、ログイン画面に差し戻す if (manager == null) { return "login"; } // ログイン情報が合っている場合、セッションにユーザの情報をアトリビュート session.setAttribute("userInfo", manager); } // セッションに管理者情報がある場合 else { // セッション情報からユーザー情報を取得する manager = (Manager) session.getAttribute("userInfo"); } // データ管理画面のテーブル一覧情報を取得する List<TableListDisplayMaster> listDisplayMaster = happyBeautyManagerService.getDisplayMaster(Constants.MANAGE_DISPLAY_TABLE_LIST); // ユーザネームをアトリビュート model.addAttribute("userName", manager.getName()); // 権限authをアトリビュート model.addAttribute("auth", manager.getAuth()); // データ管理画面のテーブル一覧のアトリビュート model.addAttribute("tablesList", listDisplayMaster); return "search"; } } |
①LoginController.javaに記述してある「ログインプロセスを行うメソッド」を
今回エラーを起こしているajaxの向き先のメソッドがあるコントローラに移動する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
/** * データ管理(manage)のコントローラー * * @author SungWook Lee and Elmurodjon * */ @Controller @RequestMapping(value = "/manage") public class ManageController { @Autowired private ManageService manageService; @Autowired HappyBeautyManagerService happyBeautyManagerService; /** * テーブル一覧のテーブルを押下した時に、検索条件を表示するためのメッソド * * @param model * @return manage */ @RequestMapping(value = "/selectTableProcess") public String selectTableProcess(Model model) { return "search"; } /** * @author Elmurodjon * * このメソッドは、テーブルの列名を表示するのに役立ちます * * @param map 画面から受けた入力値 * @param model ControllerからViewに値を受け渡すためのパラメータ * @return 結果リストが入っているMap */ @ResponseBody @RequestMapping(value = "/search_result") public Map<String, Object> selectTableProcess(@RequestBody Map<String, Object> map, Model model) { // テーブルの名前をに挿入します String identificationNumber = (String) map.get("identificationNumber"); // データベースから列の名前を取得する List<SearchDisplayMaster> tableColumList = manageService.selectedTableInfo(identificationNumber); // jspファイルにデータを送信するためのオブジェクトの作成 Map<String, Object> resultMap = new HashMap<String, Object>(); // resultMapオブジェクトに列の名前を挿入します resultMap.put("tableColumList", tableColumList); // jspファイルにデータを返す return resultMap; } /** * ログインプロセスを行うメソッド * * @param loginform ログイン画面から入力された値が入っているフォームクラス * @param result 入力チェック結果 * @param session session * @param model model * @return ログイン画面や検索画面jspのファイル名 */ @RequestMapping(value = "/loginProcess") public String loginProcess(@Valid @ModelAttribute("loginForm") LoginForm loginForm, BindingResult bindingResult, Model model, HttpSession session) { // 管理者情報を初期化 Manager manager = null; // 入力情報に誤りがある場合、ログイン画面に差し戻す if (bindingResult.hasErrors()) { return "login"; } // セッションに管理者情報がない場合 if (session.getAttribute("userInfo") == null) { // ログイン画面で入力された管理者id String id = loginForm.getId(); // ログイン画面で入力された管理者password String password = loginForm.getPassword(); // ログイン情報でDBで照会し、それに該当するユーザー情報を返す manager = happyBeautyManagerService.getManager(id, password); // ユーザー情報が取得できない場合、ログイン画面に差し戻す if (manager == null) { return "login"; } // ログイン情報が合っている場合、セッションにユーザの情報をアトリビュート session.setAttribute("userInfo", manager); } // セッションに管理者情報がある場合 else { // セッション情報からユーザー情報を取得する manager = (Manager) session.getAttribute("userInfo"); } // データ管理画面のテーブル一覧情報を取得する List<TableListDisplayMaster> listDisplayMaster = happyBeautyManagerService.getDisplayMaster(Constants.MANAGE_DISPLAY_TABLE_LIST); // ユーザネームをアトリビュート model.addAttribute("userName", manager.getName()); // 権限authをアトリビュート model.addAttribute("auth", manager.getAuth()); // データ管理画面のテーブル一覧のアトリビュート model.addAttribute("tablesList", listDisplayMaster); return "search"; } |
②前の画面であるログイン画面のsubmitするURLの向き先を変える
◆Before
|
1 2 3 4 5 6 |
<body> <div class="login-box"> <h2>ログイン画面</h2> <form:form action="loginProcess" method="POST" modelAttribute="loginForm"> |
この状態だとLoginControllerに行ってしまう。
◆After
|
1 2 3 4 5 6 |
<body> <div class="login-box"> <h2>ログイン画面</h2> <form:form action="${pageContext.request.contextPath}/manage/loginProcess" method="POST" modelAttribute="loginForm"> |
jspなのでEL式である「${pageContext.request.contextPath}」が使えてコンテキストパスが取得できる。
これによって、login/loginProsessからmanage/loginProsessにコントローラの向き先が変わる。
③ajaxのurlを変える
◆Before
|
1 |
url : "${pageContext.request.contextPath}/manage/search_result", |
現状ManageControllerを向いているので下記のように、メソッドのみ記述する。
◆After
|
1 |
url : "search_result", |
コメント