cart.jsp 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>购物车</title>
  8. <%--静态包含:base标签,css样式,js脚本--%>
  9. <%@ include file="/pages/common/head.jsp"%>
  10. <style>
  11. a{
  12. text-decoration: none;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="header">
  18. <img class="logo_img" alt="" src="" >
  19. <%-- static/img/logo.gif--%>
  20. <span class="wel_word">购物车</span>
  21. <%--静态包含,登录成功后的菜单--%>
  22. <%@ include file="/pages/common/login_success_menu.jsp"%>
  23. <script type="text/javascript">
  24. $(function () {
  25. // 给 【删除】绑定单击事件
  26. $("a.deleteItem").click(function () {
  27. return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() +"】吗?")
  28. });
  29. // 给清空购物车绑定单击事件
  30. $("#clearCart").click(function () {
  31. return confirm("你确定要清空购物车吗?");
  32. })
  33. // 给输入框绑定 onchange 内容发生改变事件
  34. $(".updateCount").change(function () {
  35. // 获取商品名称
  36. var name = $(this).parent().parent().find("td:first").text();
  37. var id = $(this).attr('bookId');
  38. // 获取商品数量
  39. var count = this.value;
  40. if ( confirm("你确定要将【" + name + "】商品修改数量为:" + count + " 吗?") ) {
  41. //发起请求。给服务器保存修改
  42. location.href =
  43. "http://localhost:8089/TestServlet09_war_exploded/cartServlet?action=updateCount&count="+count+"&id="+id;
  44. } else {
  45. // defaultValue 属性是表单项 Dom 对象的属性。它表示默认的 value 属性值。
  46. this.value = this.defaultValue;
  47. }
  48. });
  49. });
  50. </script>
  51. </div>
  52. <div id="main">
  53. <table>
  54. <tr>
  55. <td>商品名称</td>
  56. <td>数量</td>
  57. <td>单价</td>
  58. <td>金额</td>
  59. <td>操作</td>
  60. </tr>
  61. <c:if test="${empty sessionScope.cart.items}">
  62. <%--如果购物车为空,则提示用户浏览商品--%>
  63. <tr>
  64. <td colspan="5"><a href="index.jsp">当前购物车为空,请前往浏览商品</a></td>
  65. </tr>
  66. </c:if>
  67. <c:if test="${not empty sessionScope.cart.items}">
  68. <%--如果当前购物车不为空,则显示商品信息--%>
  69. <c:forEach items="${sessionScope.cart.items}" var="entry">
  70. <tr>
  71. <td>${entry.value.name}</td>
  72. <td>
  73. <input class="updateCount" style="width: 80px;"
  74. bookId="${entry.value.id}"
  75. type="text" value="${entry.value.count}">
  76. </td>
  77. <td>${entry.value.price}</td>
  78. <td>${entry.value.totalPrice}</td>
  79. <td><a class="deleteItem" href="cartServlet?action=deleteItem&id=${entry.value.id}">删除</a></td>
  80. </tr>
  81. </c:forEach>
  82. </c:if>
  83. </table>
  84. <%--如果购物车非空才输出页面的内容--%>
  85. <c:if test="${not empty sessionScope.cart.items}">
  86. <div class="cart_info">
  87. <span class="cart_span">购物车中共有<span class="b_count">${sessionScope.cart.totalCount}</span>件商品</span>
  88. <span class="cart_span">总金额<span class="b_price">${sessionScope.cart.totalPrice}</span>元</span>
  89. <span class="cart_span"><a id="clearCart" href="cartServlet?action=clear">清空购物车</a></span>
  90. <span class="cart_span"><a href="orderServlet?action=createOrder">去结账</a></span>
  91. </div>
  92. </c:if>
  93. </div>
  94. <%--静态包含:页脚--%>
  95. <%@include file="/pages/common/footer.jsp"%>
  96. </body>
  97. </html>