本题来自于郝玉龙的《JavaEE程序设计》第三章的习题
1.分析
之前尝试过cookie,但是遇到了setCookie无法生效的问题,因此本次用到的会话跟踪机制是session
本功能由一个商品页面和两个servlet组成,一个servlet负责存,另一个servlet负责展示(这个servlet也可以变成页面,虽然如此这个页面也需要一个对应的servlet进行对应的处理,因此这里直接用的servlet)
2.代码
2.1商品页面
对应代码:showcart.html:
<!DOCTYPE html>
<html>
<head>
<title>我的购物车</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function add() {
//num is an object
var num = document.getElementById("input");
num.value = String(Number(num.value)+1);
}
</script>
<script>
function sub() {
//操作同一个对象
var num = document.getElementById("input");
num.value = String(Number(num.value)-1);
}
</script>
</head>
<body>
<h1>商品浏览</h1>
<form method="post" action="AddCart" id="form1">
<select name="name" id="Item">
<option value="篮球鞋">篮球鞋</option>
<option value="篮球裤">篮球裤</option>
<option value="篮球上衣">篮球上衣</option>
</select>
<h1>数量</h1>
<input type = "button" onclick = "sub()" value = "-1" >
<input type="text" id="input" value="0" name="num">
<input type = "button" onclick = "add()" value = "+1" >
<input type="submit" value="提交">
</form>
</body>
</html>
2.2. 用于更新数据的AddCart
@WebServlet(name = "AddCart", urlPatterns = {"/AddCart"})
public class AddCart extends HttpServlet {
/**
处理添加购物车的请求
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
//新建购物车
String name = (String)request.getParameter("name");
int num = Integer.parseInt(request.getParameter("num"));
HttpSession session = request.getSession();
Map<String,Integer> cart = (Map<String,Integer>)session.getAttribute("cart");
if(cart == null){
cart = new HashMap<String,Integer>();
}
if(cart.get(name)==null){
cart.put(name,num);
}else{
int orig = cart.get(name);
cart.put(name,num+orig);
}
session.setAttribute("cart", cart);
response.sendRedirect("ShowCart");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
2.3 展示购物车详情的ShowCart
@WebServlet(name = "ShowCart", urlPatterns = {"/ShowCart"})
public class ShowCart extends HttpServlet {
/**
*用于显示购物车的内容
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet ShowCart</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>我的购物车</h1>");
Map<String,Integer> cart = (Map<String,Integer>)request.getSession().getAttribute("cart");
if(cart !=null){
//显示name和数量
for(Map.Entry<String,Integer> e : cart.entrySet()){
out.println("<p>商品名称 " + (String)e.getKey() + "</p>");
out.println("<p>商品数量 " + (Integer)e.getValue()+ "</p>");
}
}
else{
out.println("<p>购物车为空</p>");
}
out.println("</body>");
out.println("</html>");
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
效果:
3总结
虽然实现这个不难,但有几点是值得注意的:
1.AddCart–>ShowCart的跳转可以用sendRedirect也可以用getdispatcher,但是response和request是不需要传递的,因此后者没有必要,直接用前者就行看
2.在页面showcart.html里,有几处
var num = document.getElementById("input");
这几个num都是对同一个对象的不同引用,因此可以直接操作,直接就可以改了数量的文本框的值,再通过getParameter()就可以直接被AddCart获取