①编写index.jsp页面,该页面用于收集投票信息的表单及其表单元素:
<body>
<center><form action="PollServlet" method="post" name="form1">
您最喜欢哪本书:<br/><br/><br/>
<input name="item" type="radio" value="JavaWeb" checked="checked"/>JavaWeb<br/><br/>
<input name="item" type="radio" value="JavaScript" />JavaScript<br/><br/>
<input name="item" type="radio" value="JQuery" />JQuery<br/><br/>
<input name="item" type="radio" value="Flex" />Flex<br/><br/>
<input name="item" type="radio" value="Struts2" />Struts2<br/><br/>
<input name="item" type="radio" value="hibernate" />hibernate<br/><br/>
<input name="item" type="radio" value="xml" />xml<br/><br/>
<input type="submit" name="submit" value="投票"/> <input type="button" name="Submit2" value="查看投票结果 " onclick()="window.location.href='pages/e2/showResult.jsp'"/>
</form>
</center>
</body>
② 编写Servlet,首先设置请求的编码方式,并且获取投票项,然后判断是否存在保存投票结果的ServletContext(该对象在application范围内中有效),如果存在则保存在ServletContext对像的Map集合中,并将指定的投票项的得票数加1,否则创建一个并且保存在ServletContext对象的Map集合中,再将保存投票结果的Map集合保存到ServletCOntext对象中,最后向浏览器输出弹出提示框并重定向网页的JavaScript代码。PollServlet具体代码如下:
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String item=request.getParameter("item");//获得投票项
ServletContext servletContext=request.getSession().getServletContext();//获取ServletContext,该对象在application中有效
Map map=null;
if(servletContext.getAttribute("pollResult")!=null){
map=(Map)servletContext.getAttribute("pollResult");//获取投票结果
//将当前的投票项加1
map.put(item, Integer.parseInt(map.get(item).toString())+1);
}else{
String[] arr={"JavaWeb","JavaScript","JQuery","Flex","Struts2","hibernate","xml"};
map=new HashMap();
//初始化map集合
for(int i=0;i<arr.length;i++){
if(item.equals(arr[i])){
map.put(arr[i], 1);
}else{
map.put(arr[i], 0);
}
}
}
servletContext.setAttribute("pollResult", map);
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
out.print("<script>alert('投票成功!');window.location.href='pages/e2/showResult.jsp';</script> ");
}
③编写showResult页面,该页面应用EL表达式输出投票结果,具体代码如下:
<body>
<div style="text-align=left;margin-left:550px;">您最喜欢哪本书:<br/><br/><br/>
JavaWeb:
<img src="bar.jpg" width="${220*(applicationScope.pollResult['JavaWeb']/(applicationScope.pollResult['JavaWeb']+applicationScope.pollResult['JavaScript']+
applicationScope.pollResult['JQuery']+applicationScope.pollResult['Flex']+applicationScope.pollResult['Struts2']+
applicationScope.pollResult['hibernate']+applicationScope.pollResult['xml']))}" height="13"/>
(${empty applicationScope.pollResult["JavaWeb"]?0:applicationScope.pollResult["JavaWeb"]} )<br/><br/>
JavaScript:
<img src="bar.jpg" width='${220*(applicationScope.pollResult["JavaScript"]/(applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"]))}' height="13"/>
(${empty applicationScope.pollResult["JavaScript"]?0:applicationScope.pollResult["JavaScript"]} )<br/><br/>
JQuery:
<img src="bar.jpg" width='${220*(applicationScope.pollResult["JQuery"]/(applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"]))}' height="13"/>
(${empty applicationScope.pollResult["JQuery"]?0:applicationScope.pollResult["JQuery"]} )<br/><br/>
Flex:
<img src="bar.jpg" width='${220*(applicationScope.pollResult["Flex"]/(applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"]))}' height="13"/>
(${empty applicationScope.pollResult["Flex"]?0:applicationScope.pollResult["Flex"]} )<br/><br/>
Struts2:
<img src="bar.jpg" width='${220*(applicationScope.pollResult["Struts2"]/(applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"]))}' height="13"/>
(${empty applicationScope.pollResult["Struts2"]?0:applicationScope.pollResult["Struts2"]} )<br/><br/>
hibernate:
<img src="bar.jpg" width='${220*(applicationScope.pollResult["hibernate"]/(applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"] ))}' height="13"/>
(${empty applicationScope.pollResult["hibernate"]?0:applicationScope.pollResult["hibernate"]} )<br/><br/>
xml:
<img src="bar.jpg" width='${220*(applicationScope.pollResult["xml"]/(applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"] ))}' height="13"/>
(${empty applicationScope.pollResult["xml"]?0:applicationScope.pollResult["xml"]} )<br/><br/>
合计:
${applicationScope.pollResult["JavaWeb"]+applicationScope.pollResult["JavaScript"]+
applicationScope.pollResult["JQuery"]+applicationScope.pollResult["Flex"]+applicationScope.pollResult["Struts2"]+
applicationScope.pollResult["hibernate"]+applicationScope.pollResult["xml"]}人投票!
<input name="Button" type="button" class="btn_grey" value="返回" οnclick="window.location.href='pages/e2/index.jsp'"/>
</div> </body>
④在web.xml中配置servlet:
<servlet>
<servlet-name>PollServlet</servlet-name>
<servlet-class>com.xuan.controller.PollServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PollServlet</servlet-name>
<url-pattern>/PollServlet</url-pattern>
</servlet-mapping>
⑤效果图: