欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

淘淘商城——修改购物车商品数量

程序员文章站 2022-03-10 16:28:25
...

上文我们实现了展示购物车商品列表的功能,本文我们将继续完善购物车,实现购物车商品数量的修改功能。
当前购物车列表,如果我们修改商品数量,总价格不变,而且页面刷新后还会回到原来的数字。
我们首先看看上节课我们展示的购物车列表,如下图所示,当前商品数量是5,总价格是14995元。
淘淘商城——修改购物车商品数量
下面我们点击那个”+”让商品数量加1,发现商品数量变成6了,但是商品总价格依然是14995元。
淘淘商城——修改购物车商品数量
我们再刷新下这个页面,发现又回到了初始状态,这说明我们的购物车还不能真正修改商品数量,而且我们修改商品数量的同时还要修改商品总价格以及修改Cookie中的信息。
淘淘商城——修改购物车商品数量
下面我们便来实现购物车商品数量的修改功能,页面上的”-“和”+”图标显然都是由js控制的,我们得到cart.jsp页面去查找,打开cart.jsp页面,搜索”+”便可以搜到在第82行,如下图所示。可以看到”-“和”+”并没有显示的指定onclick事件,那么肯定是用id或class来绑定事件的,而这里定义的id和class是相同的,因此我们拿”increment”去js中去查找。
淘淘商城——修改购物车商品数量
查找的话,我们使用Ctrl+H打开搜索对话框,点击”File Search”,在搜索框中输入要搜索的内容,下面的文件类型指定搜索.js文件,然后点击”Search”进行搜索,如下图所示。
淘淘商城——修改购物车商品数量
搜索到的结果如下图所示,我们双击它进入cart.js文件。
淘淘商城——修改购物车商品数量
可以看到如下图所示代码。
淘淘商城——修改购物车商品数量
那么cart.jsp页面中到底有没有引用cart.js呢?我们到cart.jsp页面最下方,可以看到确实引用了cart.js文件,因此,我们可以知道,上图所定义的事件就是我们要处理的事件。
淘淘商城——修改购物车商品数量
下面我们便来分析下下面的js代码:

$(".increment").click(function(){//+
    var _thisInput = $(this).siblings("input");
    _thisInput.val(eval(_thisInput.val()) + 1);
    $.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val() + ".action",function(data){
        TTCart.refreshTotalPrice();
    });
});
$(".decrement").click(function(){//-
    var _thisInput = $(this).siblings("input");
    if(eval(_thisInput.val()) == 1){
        return ;
    }
    _thisInput.val(eval(_thisInput.val()) - 1);
    $.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val() + ".action",function(data){
        TTCart.refreshTotalPrice();
    });
});
  • $(".increment").click(function(){的意思很明显是给class为”increment”的那个”+”号按钮绑定了一个事件。
  • var _thisInput = $(this).siblings("input");这句代码的意思是,$(this)是把”+”这个<a>标签转换成jQuery对象,因为只有转成jQuery对象才能使用它的方法,$(this).siblings("input");的意思是找到兄弟节点中是<input>的标签。
  • _thisInput.val(eval(_thisInput.val()) + 1);这句代码的意思是找到input标签后,将数字加1。
  • $.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val() + ".action",function(data){这句代码的意思是,点击”+”会向服务端发送post请求,请求的url的形式是:/cart/update/num/{itemId}/{num}.action,这里需要注意的是,url的结尾不能是.html,如果请求的url是以”.html”结尾的话,但服务端现在响应的是一个json,json就不是html,所以这个时候就是有问题的,在SpringMVC中如果请求的后缀是.html,这时必须给它响应一个字符串,如果响应的是一个json,那么这个时候就会报406错误。

至于”-“操作,与”+”一样,我就不再啰嗦一遍了。
由于目前我们的taotao-cart-web工程的web.xml文件中只拦截了”.html”结尾的请求,没有拦截”.action”结尾的请求,因此我们需要在web.xml文件当中添加对”*.action”的拦截,如下图所示。
淘淘商城——修改购物车商品数量
下面我们便来编写Controller层代码,如下图所示。
淘淘商城——修改购物车商品数量
为方便大家复制,现将新添加的updateNum方法的代码贴出。

/**
 * 更新购物车商品数量
 */
@RequestMapping("/cart/update/num/{itemId}/{num}")
@ResponseBody
public TaotaoResult updateNum(@PathVariable Long itemId, @PathVariable Integer num,
        HttpServletRequest request, HttpServletResponse response) {
    // 取购物车商品列表
    List<TbItem> cartList = getCartList(request);
    // 遍历商品列表找到商品
    for (TbItem tbItem : cartList) {
        if (tbItem.getId().intValue() == itemId) {
            // 更新商品数量
            tbItem.setNum(num);
            break;
        }
    }
    // 写入cookie
    CookieUtils.setCookie(request, response, COOKIE_TT_CART, 
            JsonUtils.objectToJson(cartList), COOKIE_CART_EXPIRE, true);
    // 返回结果
    return TaotaoResult.ok();
}

修改完了代码,现在我们开始进行测试,我们重启taotao-cart-web工程,重启成功后,我们刷新http://localhost:8089/cart/cart.html链接,然后点击”-“或者”+”,可以看到总价现在可以跟着变化了。而且我们再刷新页面,也不会回到原来的数量5及原来的总价了!说明我们的商品修改数量功能完成了。
淘淘商城——修改购物车商品数量