JavaWeb:购物车

一、说明

这是一个JavaWeb购物车简单的应用。通过页面显示购物车和商品，顾客可以添加、修改、删除商品。有关购物车的商品信息会保存到数据库，下次登陆时自动读取。
主要用到的技术：

• (1)jquery
• (2)jQueryAjax
• (3)三层架构：web、service、dao
• (4)Servlet、jsp

  二、具体实现

• 1项目结构及所需jar包
  
• 2.由于代码比较多，就举一些小部分来说明一下，如需完整代码，请访问我的github。

• 3.在执行添加购物车时，先看数据库中是否有相同的，如果没有就添加，如果有就提示该商品已经在购物车，可以去购物车中进行操作。

  public ReturnResult add(HttpServletRequest request, HttpServletResponse response) {
  
  	int flag=0;
  	boolean flag1=false;
  	ReturnResult result=new ReturnResult();
  	int id=Integer.parseInt(request.getParameter("id"));
  	String name=request.getParameter("name");
  	float price=Float.parseFloat(request.getParameter("price"));
  	int num=Integer.parseInt(request.getParameter("num"));
  	GoodsService goods = new GoodsServiceImpl();
  	flag1=goods.isExist(id);
  	if(flag1==true) {
  		result.returnFail("该商品已经在购物车中！！！");
  		PrintUtil.write(result, response);
  	}else {
  	flag=goods.add(id,name, price, num);
  	if(flag==1) {
  		result.returnSuccess("添加购物车成功！！！");
  		 PrintUtil.write(result, response);
  	}else {	
  		result.returnFail("添加购物车失败！！！");
  		 PrintUtil.write(result, response);
  	}
  	}
  	return result;
  }

• 4.在jsp页面所做的操作，比如：单机按钮，之后的动作交给ajax去找相应的servlet，以添加购物车为例。这里面可以看出jquery是如何从页面获取数据，以及ajax是怎么调用servlet的。

  function add_shoppingcart(btn) {//将btn(dom)转换为jQuery对象 
  		//获取input标签的父类td 的所有元素
  		var tds = $(btn).parent().siblings();//获取商品的信息，有n列就有n个tds.eq(),里面的参数从零开始，siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
  		var id=tds.eq(0).text();
  		var name = tds.eq(1).text();//商品名称，eq将匹配元素集合缩减为位于指定索引的新元素。
  		var price = tds.eq(2).text();//商品价格
  		var num=1;
  		
  		$.ajax({
  	        url:contextPath+"/ShopCarServlet",//servlet路径
  	        method:"post",//请求方式
  	        //传个servlet中add方法，servlet可以以id来获取页面id值
  	        //id:id 后面的id是ajax获取页面的id servlet可以
  	        //通过前面的id获取页面id值 request.getParam.....
  	        data:{id:id,name:name,price:price,num:num,action:"add"},
  	        //收集返回的json串，判断是否成功
  	        success:function(jsonStr){
  	            var result=eval("("+jsonStr+")");
  	            
  	            if(result.status==1){
  	                 //在页面弹出对话框显示结果
  	            	alert(result.data);
  	            	//添加新行
  	            	var new_tr = $('<tr>'
  	        				+'<td>'
  	        				+id
  	        				+'</td>'
  	        				+ '<td>'
  	        				+ name
  	        				+ '</td>'
  	        				+ '<td>'
  	        				+ price
  	        				+ '</td>'
  	        				+ '<td align="center">'
  	        				+ '<input type="button" value="-" onclick="change(this, -1);"/> '
  	        				+ '<input type="text" size="3" readonly value="1"/> '
  	        				+ '<input type="button" value="+" onclick="change(this, 1);"/> '
  	        				+ '</td>'
  	        				+ '<td>'
  	        				+ price
  	        				+ '</td>'
  	        				+ '<td align="center"><input type="button" value="x" onclick="del(this);"/></td>'
  	        				+ '</tr>');
  	        		$("#goods").append(new_tr);//生成新行放在表的后面
  	        		total();//计算总价
  	            }else{
  	            	alert(result.message);
  	           
  	            }
  	        }
  	    });
  					
  	}

• 5.在jsp页面加载时，自动调用js方法,这里是为了在每次添加、修改商品后可以重新计算价格

  <script type="text/javascript">
  window.onload=function(){
  	var trs = $("#goods tr"); // 获取tbody下的所有行，id选择器
  	var sum = 0;
  	for (var i = 0; i < trs.length; i++) {
  		var td = trs.eq(i).children().eq(4);// 获取每一行第5列的值
  		var m = td.text();
  		sum += parseFloat(m);
  	}
  	$("#total").text(sum);//得到计算结果，并显示在td中
  }
  </script>

• 6.防止页面保留未操作前的页面显示，在相应执行方法后加如下代码(js)，就可自动刷新页面

  window.location.reload(true);//刷新一下页面

• 7.EL表达式可以不用加“”就放在其中

    <td align="center">
       <input type="button" value="-" onclick="change(this, -1);"/> 
    <input type="text" size="3" readonly value=${good.g_num} /> 
    <input type="button" value="+" onclick="change(this, 1);"/> 
  </td>

三、结果显示

注:

• 所做的分析都是笔者自己的见解，如有不正确还请见谅。
• 另外，如需代码请访问我的Github：https://github.com/Zxnaruto

赏

Thank you,么么哒

支付宝

微信