一、同一個Servlet處理多個請求，顯示不同的頁面內容

導航標籤頁

bootStrap模板：

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">
 
Messages</a></li>
</ul>

在前面介紹到主頁中這樣用：

    <div class="blogNav">
        <ul class="nav nav-tabs" id="navUrl">
          <li role="presentation"><a href="Home?action=showByTime">首頁</a></li>
          <li role="presentation"><a href="Home?action=showByViews"
 
>48小時閱讀排行榜</a></li>
         <li role="presentation"><a href="Home?action=showByLikes">10天推薦排行榜</a></li>
    </ul>
    </div>

這個的關鍵是home,jsp中連結的href加了個action引數，這樣一來，處理頁面請求的HomeServlet（在web.xml中配置）中，就可以根據action引數的不同，呼叫不同的函式查詢資料庫，返回不同的部落格資訊放在請求屬性中提供給前端獲取：

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        request.setCharacterEncoding("utf-8");
        String action=request.getParameter("action");
        if(StringUtil.isNotEmpty(action)){
            if(action.equals("showByViews")){
                showBlogsByViews(request,response);
            }else if(action.equals("showByLikes")){
                showBlogsByLikes(request,response);
            }else if (action.equals("showByTime")){
                showBlogsByTime(request,response);
            }
        }else{
            showBlogsByTime(request,response);
        }
        showNavContent(request,response);
        request.getRequestDispatcher("home.jsp").forward(request, response);
    }
  

在前面說到的前端設計中，部落格列表項總是獲取${blogList}中的物件資訊，因此，上面showBlogsByViews，showBlogsByLikes，showBlogsByTime，返回的請求引數明都是“blogList”，從而實現程式碼複用：

request.setAttribute("blogList", viewsBlogList);//action不同，設定的blogList內容不同

（二）點選導航標籤頁後背景色保持不變知道點選另一個標籤頁

重新看下bootstrap導航標籤模板，活躍狀態的標籤頁有class屬性，取值為active。

 <li role="presentation" class="active"><a href="#">Home</a></li>

為了實現想要的頁面效果，在html頁面加載出來後，判斷當前URL的引數，根據引數的不同，設定背景色

引數action="showByTime" ——“首頁“ 為active狀態

引數action="showByViews" ——“48小時閱讀排行榜為active狀態"

引數action="showByLikes"——“10天推薦排行榜為active狀態”

<script type="text/javascript">
    window.onload=function(){
        //var currentPath=location.pathname;   /*獲取的是連線地址/Blog/Home
        var paramsObj=location.search;       /*獲取的是連結引數 ？action=action=showByLikes*/
        var navAs=document.getElementById("navUrl").getElementsByTagName("a");
        if(paramsObj!=null&&paramsObj!=""){
            var paramsStr=paramsObj.substring((paramsObj.indexOf("?")+1));   /*擷取問號之後的字串action=showByLikes*/
            var paramsArr=new Array();
            paramsArr=paramsStr.split("&");  /*多個引數會以&分隔開*/
            var actionParam=paramsArr[0].split("=")[1];    /*獲取第一個引數action=showByLikes並以"="號分離出showByLikes*/
            var find=0;    
            for(var i=0;i<navAs.length;i++){
                if(navAs[i].href.indexOf(actionParam)!=-1){
                    navAs[i].parentNode.className="active";
                    find=true;
                    break;    /*遍歷導航標籤的所有連結找到包含當前url的actio引數值的，找到就調出迴圈*/
                }
            }
            if(!find){
                navAs[0].parentNode.className="active";//預設首頁標籤是active狀態
            }
        }else{
            navAs[0].parentNode.className="active";
        }
        
    };  //指令碼用於點選不同連結是導航欄標籤背景色的變化
</script>