购物车案例【简单版】(四)

简介: 为了巩固MVC的开发模式,下面就写一个购物车的小案例..
  • BusinessService又多了一个功能

/*用户要在购物车中删除某个购物项*/

   publicvoiddeleteBook(Stringid,Cartcart)throwsCartNotFoundException{


       //如果用户是直接访问DeleteCartBook的Servlet的,在session中是没有cart这个属性的!

       //告诉用户购物车是空的

       if(cart==null){

           thrownewCartNotFoundException("购物车为空");

       }


       //把购物项移除出去集合就行了!

       cart.getBookMap().remove(id);

   }

效果:

7.gif

多本一起购买


从上面的gif我们就可以发现,如果我重复买一本书,需要一本一本地点!这样会非常麻烦!

我们要怎么实现:用户想要买多少本,购物车的数量就修改为多少本呢


在购物车上,数量的值改成是输入框


<td><inputtype="text"name="quantity"value="${me.value.quantity}"></td>

效果:

8.gif

好的,现在我们已经能够把数量随自己想要多少本,就改成是多少了。现在主要的问题就是,怎么在改的同时,数据也及时地更新?

写javascript代码,让输入框的信息提交给服务器

我们写javascript的代码,监控着输入框的变动,如果有变动,就响应事件,将变动的数据传递给服务器,更新数据!

<scripttype="text/javascript">


       /*

       * @input 将输入框本身填入(这样可以获取得到输入框的值)

       * @id   将书本的id传递进来,告诉服务器是修改哪一个购物项(书)

       * @oldValue 原本的值,如果用户不想修改了,就修改为原本的值(下面会询问用户是否确定修改)

       * */

       functionupdate(input,id,oldValue){


           //获取得到输入框的数据

           varquantity=input.value;


           //询问用户是否真的修改

           varb=window.confirm("你确定修改吗?");


           //如果确定修改,就跳转到修改的Servlet上

           if(b){

               window.location.href="${pageContext.request.contextPath}/UpdateQuantity?bookid="+id+"&quantity="+quantity+"";

           }else{


               //如果不确定修改,把输入框的数据改成是原来的

               input.value=oldValue;

           }

       }

   </script>

目录
相关文章
|
JavaScript 前端开发 Java
55dwr - 购物车案例(实现购物车)
55dwr - 购物车案例(实现购物车)
41 0
|
3月前
|
前端开发 数据库
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
这篇文章介绍了如何在SpringBoot+Vue框架下实现购物车功能,包括防止商品重复加入、展示商品信息、删除商品时的提示,以及点击图片放大的前端实现。
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
|
6月前
|
JavaScript
基础购物车
基础购物车
40 1
|
6月前
|
JavaScript
基础购物车功能
基础购物车功能
|
SQL 存储 前端开发
显示购物车列表【项目 商城】
显示购物车列表【项目 商城】
128 0
uniapp——添加购物车数据以及删除购物车数据
添加购物车数据以及删除购物车数据
240 0
|
前端开发 JavaScript
【畅购商城】购物车模块之修改购物车以及结算
【畅购商城】购物车模块之修改购物车以及结算
173 0
【畅购商城】购物车模块之修改购物车以及结算
|
前端开发
购物车项目(前端)
购物车项目(前端)
购物车项目(前端)
html+css实战183-购物车
html+css实战183-购物车
140 0
html+css实战183-购物车