jspからJavaScriptをファイル分けしたらajaxがうまく動かなくなった対処法

javascript/jQuery

分ける前のjspについて

このようにjsp内にスクリプトを書いて、そこでajaxを使って非同期にテーブルを作っています。

処理としては、オーナー、テーブル情報などのテーブル名を押下すると
非同期で上記のようにテーブルのカラムごとの検索条件入力画面が出力されるというものです。

 

jsを別けた

行った内容

下記のようなディレクトリにjsファイルを作り、先ほどのJavaScriptの記述を単純に置きました。

 

jsp内で変わったことといえば、作ったjsファイルを参照するための記述を1行いれました。
(もちろんJavaScriptの記述は消します)

 

エラー内容

しかし、エラーになってしまいます。
ajaxのerrorだった場合の処理でアラートがでているので、jsファイルとの連動ができています。

 

ブラウザの開発ツールのログをみると、ajaxが参照すべきコントローラのメソッドへのパスがおかしいことになっていることが分かります。

 

ただJavaScriptの記述をファイル分けしただけなのに、なぜこのようにエラーになってしまうのでしょう?

 

今回の問題点と解決策

原因のパス

正しく、原因は正しいURLが生成できないことにあります。

原因①:${pageContext.request.contextPath}はEL式。EL式はJSP2.0のプラグイン。
なのでjsファイル内で記述しても「$%7BpageContext.request.contextPath%7D」というような風になり、jsファイルでは使えません。

 

原因②:コントローラを別けて作っているので、正しい位置にメソッドが置けていない。

これに関しては下記の解決法を見ていただいたほうが、理解しやすいと思うので
ここでは詳しい解説はしません。

 

解決方法

◆元のコントローラ

①LoginController.javaに記述してある「ログインプロセスを行うメソッド」を
今回エラーを起こしているajaxの向き先のメソッドがあるコントローラに移動する

 

 

②前の画面であるログイン画面のsubmitするURLの向き先を変える

◆Before

この状態だとLoginControllerに行ってしまう。

◆After

jspなのでEL式である「${pageContext.request.contextPath}」が使えてコンテキストパスが取得できる。

これによって、login/loginProsessからmanage/loginProsessにコントローラの向き先が変わる。

 

 

③ajaxのurlを変える

◆Before

現状ManageControllerを向いているので下記のように、メソッドのみ記述する。

◆After

 

 

 

 

 

コメント