Jpetstore——使用AJAX和jQuery改善用户体验3（购物车模块）

逃离我推掉我的手 2021-11-09 10:34 353阅读 0赞

## Jpetstore——使用AJAX和jQuery改善用户体验3（购物车模块） ##

CSDN下载：[基于MVC用JSP/Servlet实现JPetStore——使用AJAX和jQuery改善用户体验][MVC_JSP_Servlet_JPetStore_AJAX_jQuery]

--------------------

1.  购物车模块。在购物车模块中修改购买数量时，通过AJAX修改购物车信息，而不再要求用户点击更新按钮才能更新商品信息。

--------------------

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]  
**实现方法：**  
  购物车修改数量功能改善前是需要用户点击更新按钮，商品相关信息才会更新。通过AJAX功能改善后用户在数量框输入相应数量后，鼠标离开输入框，商品相对应的数量、总价等信息即会发生改变。  
  首先，在jsp页面中设置对应的id用户获取js操作的节点，通过HTML绑定调用js中的功能，接下来，在js页面中回去更改商品的数量值，调用servlet更改相对应的信息并将更改后的信息通过字符串传输回来，再在js中对字符串进行处理并显示到jsp页面上。

**核心源代码：**  
jsp：

js：

servlet：

//从对话中，获取购物车
    HttpSession session = request.getSession();
    cart = (Cart)session.getAttribute("cart");
    
    Iterator<CartItem> cartItemIterator = cart.getAllCartItems();
    
    while (cartItemIterator.hasNext()) { 
        //产品数量增加
        CartItem cartItem = (CartItem) cartItemIterator.next();
        String itemId = cartItem.getItem().getItemId();
    
        try { 
            int quantity = Integer.parseInt((String) request.getParameter("quantity"));
            cart.setQuantityByItemId(itemId, quantity);
            if (quantity < 1) { 
                cartItemIterator.remove();
            }
        } catch (Exception e) { 
            e.printStackTrace();
        }
    }
    session.setAttribute("cart", cart);
    
    Cart cart2 = (Cart)session.getAttribute("cart");
    Iterator<CartItem> cartItemIterator2 = cart2.getAllCartItems();
    String quantityAll = "";
    while (cartItemIterator2.hasNext()) { 
        //产品数量增加
        CartItem cartItem2 = cartItemIterator2.next();
        int quantity2 = cartItem2.getQuantity();
        quantityAll += quantity2 + "," + cartItem2.getTotal() + "," + cart2.getSubTotal();
    }
    response.setContentType("text/xml");
    PrintWriter out = response.getWriter();
    out.write(quantityAll);

--------------------

完整项目文档及源码请参考：[实验二 使用AJAX和jQuery改善用户体验][_AJAX_jQuery]

--------------------

[MVC_JSP_Servlet_JPetStore_AJAX_jQuery]: https://download.csdn.net/download/qq_39564555/11465162
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20211109/04f06e674f2f4845a7e5397b6c1d5d74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]: /images/20211109/0267276bbd7f4f898bb0bf0907f5549f.png
[_AJAX_jQuery]: https://github.com/zz2summer/JavaWeb-Application-Developing-Technology/tree/master/%E5%AE%9E%E9%AA%8C%E7%9B%B8%E5%85%B3/%E5%AE%9E%E9%AA%8C%E4%BA%8C%20%20%E4%BD%BF%E7%94%A8AJAX%E5%92%8CjQuery%E6%94%B9%E5%96%84%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C