修改购物车商品数量
来源:互联网 发布:软件名字 编辑:程序博客网 时间:2024/05/01 03:35
当前购物车列表,如果我们修改商品数量,总价格不变,而且页面刷新后还会回到原来的数字
我们首先看看上节课我们展示的购物车列表,如下图所示,当前商品数量是3,总价格是20997元。
下面我们点击那个"+"让商品数量加1,发现商品数量变成4了,但是商品总价格依然是20997元。
我们再刷新下这个页面,发现又回到了初始状态,这说明我们的购物车还不能真正修改商品数量,我们修改商品数量的同时还要修改商品总价格以及修改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(){的意思很明显是给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,因为我们从服务端返回的结果是个Map,如果请求是以".html"结尾的话,浏览器会认为返回的结果是个静态页面,浏览器去尝试将Map转成html,发现根本没法转换,因此便会报406的错误。至于"-"操作,与"+"一样,我就不再啰嗦一遍了。
由于目前我们的taotao-cart-web工程的web.xml文件中只拦截了"*.html"结尾的请求,没有拦截"*.action"结尾的请求,因此我们需要在web.xml文件当中添加对"*.action"的拦截。如下图所示。添加的代码如下:
下面我们便来写Controller接口,如下图所示。代码如下:
修改完了代码,现在我们开始测试,我们重启taotao-cart-web工程,重启后,我们刷新http://localhost:8089/cart/cart.html,然后点击"-"或者"+",可以看到总价现在可以跟着变化了。而且我们再刷新页面,也不会回到原来的数量3及原来的总价了!说明我们的商品修改数量功能完成了。
- 修改购物车商品数量
- ecshop修改商品数量后自动更新购物车
- 淘淘商城系列——修改购物车商品数量
- 减少购物车中的商品数量
- 学习淘淘商城 第一百课(修改购物车商品数量)
- 手机网上商城-项目经验总结(十一)-修改购物车商品数量
- php基于thinkphp的购物车--能够更改商品数量
- Android天猫购物车EditText编辑商品数量效果
- 仿淘宝购物车demo---增加和减少商品数量
- 实现购物车商品数量+1、-1按钮的效果
- 购物车商品数量增减输入自定义View
- 实现类似于购物车控制商品数量的按钮
- HTML 购物车计算总价+添加或者减少商品数量
- 【Kotlin】一个有趣的商品数量加减交互控件(商详页或者购物车商品数量的加减)
- 修改相关商品显示数量
- jquery来实现的添加商品和减少商品数量,用于购物车等实时改变价格
- ecshop优化2-商品页购买数量加减按钮ecshop购物车页加减按钮
- ecshop购物车页面使用ajax更新商品数量、小计、总价,点击加号和减号
- maven deploy第三方jar包到nexus, 异常Return code is: 401, ReasonPhrase: Unauthorized
- 百万级数据库SQL优化总结
- redis持久化以及重写机制的使用
- Maven 仓库:本地仓库,远程仓库,setting.xml
- 如何操控意识
- 修改购物车商品数量
- 习题 7.16 写一个函数,输入一个十六进制数,输出相应的十进制数。
- 求职季找工作心得与应聘经验分享(三)(含部分在京单位与企业招聘详情)
- 一次cpu标高问题查找
- SGI STL 的内存管理
- 【博览网】设计模式——第一周课程笔记
- Python3网络爬虫快速入门实战解析
- sqoop增量数据导入hive表的方法
- Cisco 40G QSFP Datasheet