Servlet + TomcatでWeb その2
はじめに
前回の後半で、 非同期でHTMLファイルを読み込んでページの一部を置き換える処理をしていましたが、結局JavaScriptから直接WebContent>contentsにあるファイルを取得することにしました。
javascript.js
〜省略〜 this.getHtml = function(intNewTabNum, intNewContentNum) { $.ajax({ type: 'GET', /* ex: contents/0.html */ url: 'contents/' + ContentFileCollection.findWhere({page: intNewTabNum, content: intNewContentNum}).get('file'), dataType: 'html', success: function(data) { $('#contents_frame').html(data); }, error:function() { alert('Error'); } }); }; 〜省略〜
以下に記述するようなページ全体を切り替える処理、またはServletのコード内でHTMLを記述しているものが多く、解決には時間がかかりそうだったためです。
ページ遷移
Servletでページ遷移を行うためには、「getRequestDispatcher」と「forward」を使用します。
「getRequestDispatcher」で遷移先のHTML、JSPなどのパスを指定して、「forward」で現在のページから指定のページに制御を渡してやります。
PageController.java
〜省略〜 Enumeration_enmParamName; String _strPagePath = ""; RequestDispatcher _rdsDispatcher; String _strParamName = ""; public PageController() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // エンコーディングの指定. request.setCharacterEncoding("UTF-8"); // JavaScriptからパラメータを取得. _enmParamName = request.getParameterNames(); while (_enmParamName.hasMoreElements()){ _strParamName = _enmParamName.nextElement(); // パラメータ名「tab」の値を取得する. if (_strParamName.equals("tab")) { switch(Integer.parseInt(request.getParameter(_strParamName))) { case 1: _strPagePath = "mainpage2.html"; break; default: // 1以外はすべて0のページを表示しておく. _strPagePath = "mainpage.html"; break; } _rdsDispatcher = request.getRequestDispatcher(_strPagePath); // ページ遷移 _rdsDispatcher.forward(request, response); } } } 〜省略〜
- パラメータを取得するあたりは前回と同じですが、後述する処理のため、パラメータが2つ以上になることからdoGetの中でパラメータ名を確認しています。
- WebContent直下にmainpage.html、mainpage2.htmlという2つのファイルを置き、JavaScriptから渡されるパラメータによって出し分けています。
JavaScriptでパラメータの値を取得
この辺で作成していた、ページ遷移前に表示していたTabの状態を遷移後に引き継ぐ処理を行います。
HTMLのテンプレートエンジンなどを使用していないため、URLのパラメータから該当の値を取得することにします。
- Tabの状態を表すパラメータは「rtn=2」の形で渡すこととします。
- 表示するページの番号もパラメータに含めているため、URLとしては「localhost:8080/jvTabTest/page?tab=0&rtn=2&...」のような形となります。
javascript.js
〜省略〜 this.loadTabs = function(intNewTabNum, intLastRightTabNum){ // URLのパラメータを取得して、右に表示されるTab番号(rtn=2)を取得する. // 「window.location.search」で、URLから?以降のパラメータが取得できる. var arySplitByName = window.location.search.split('rtn='); var aryRightTabNum = (arySplitByName.length > 1)? arySplitByName[1].split('&'): [2]; // ロード時に実行. Tabの表示切り替え、矢印ボタンのEnable/Disable. intTabNum = intNewTabNum; intRightTabNum = aryRightTabNum[0]; updateTabStyles(); // デフォルトでボタン0のコンテンツが表示されるようにする document.getElementById("btn_contents_0").checked = true; getHtml(intTabNum, 0); }; 〜省略〜
- 「window.location.search」で「?tab=0&rtn=2&...」の部分を取得
- 「rtn=」でSplitして、「2&...」の部分を取得
- 「&」でSplitして、「2」を取得
なんだか回りくどい方法ですね...。 jQueryプラグインなどもあるようなのですが...。
ともかく、これで少しはそれらしい動きになってきた気がします。
ただ、エラー処理などを全くしていないので、次回はそのあたりを触ってみたいと思います。