一、同一个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&¶msObj!=""){ 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>
原文地址:https://www.cnblogs.com/sanyun/p/9950038.html
时间: 2024-10-06 13:38:24