jsp中使用el表达式实现购物车功能

最新推荐文章于 2022-04-23 11:31:22 发布
最新推荐文章于 2022-04-23 11:31:22 发布
阅读量870 收藏 7
点赞数
分类专栏： 前端学习 文章标签： jsp jstl jquery ajax servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41394352/article/details/112951492
版权

引入依赖库：

引入jstl标签库。

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

由于使用了jquery来实现dom操作，需要在界面中引入jquery库。

<script type="text/javascript" src="${pageContext.request.contextPath}/front/js/jquery-3.3.1.js"></script>

页面代码：

            <div class="tro_tab_h">
                <div class="col tro_tab_check">
                    <h1 class="tro_tab_check_p">√</h1>
                    <span class="tro_tab_check_sp">全选</span>

                </div>
                <div class="col tro_tab_img">

                </div>
                <p class="col tro_tab_name">商品名称</p>
                <div class="col tro_tab_price">单价</div>
                <div class="col tro_tab_num">数量</div>
                <div class="col tro_tab_total">小计</div>
                <div class="col tro_tab_action">操作</div>

            </div>
 <!-- 动态数据开始 -->
            <c:forEach items="${trolleyList }" var="trolley" varStatus="vs">
	            <div class="tro_tab_h1">
	                <div class="col tro_tab_check">
	                    <h1 class="tro_tab_check_p" style="background-color: #fff">
							<input type="checkbox" name="ids" class="ids" value="${trolley.tid}">
						</h1>
	                    <span class="tro_tab_check_sp"></span>
	
	                </div>
	                <div class="col tro_tab_img">
	                    <img src="/xiaomimallpic/${trolley.commodity.photo}" alt="">
	
	                </div>
	                <div class="col tro_tab_name">
	                <!--<h2 tro_tab_name_h2>小米电视4A 32英寸 黑色 32英寸</h2>-->
	               <li class="tro_tab_name_li1" style="font-size: 16px;">${trolley.commodity.cname}&nbsp;${trolley.commodity.color}</li>
	                </div>
	                <div class="col tro_tab_price">
	                    <span  id="price_${trolley.tid}">${trolley.commodity.price}</span><span>元</span>
	                </div>
	                <div class="col tro_tab_num">	                    
	                    <a class="tro_tab_num_p1" id="subtract_${trolley.tid }" class="subtract" type="${trolley.number}" href="javascript:void(0)" onclick="reduceNumber(${trolley.tid},this.type)">-</a>
	                    <input type="number" value="${trolley.number}" id="num_${trolley.tid}" class="num" onchange="changeNumber(${trolley.tid})"/>
	                    <a class="tro_tab_num_p2" id="plus_${trolley.tid }" class="plus" type="${trolley.number}" href="javascript:void(0)"  onclick="addNumber(${trolley.tid},this.type)">+</a>
	                </div>
	                <div class="col tro_tab_total ">
	                    <c:set var="sumPrice" value="${sumPrice+ (trolley.number*trolley.commodity.price)}"></c:set>
	                    <span class="tro_tab_total_value" id="prices_total_${trolley.tid}" >${trolley.number*trolley.commodity.price}</span>元
	
	                </div>
	                <div class="col tro_tab_action" style="cursor: pointer;width: 40px;height: 40px;" onclick="delTrolleyCommodityByTid(${trolley.tid})">删除</div>
	            </div>
            
            </c:forEach>

在这里插入图片描述

需求分析：

  1. 在点击加减链接后调用后台加减商品请求，调用成功后返回，并将中间数量实现加1或减1。商品数量最小是1，前台和后台都有限制，最大数量由后台限制。
  2. 输入商品数量后调用后台更改商品数量请求，调用成功后返回。
  3. 不管是通过点击还是直接输入数字修改商品数量，调用成功返回后，都要更新商品小计金额。
  4. 点击左边第一列的选框时，实时统计选中的商品总数，同时算出选中商品的小计总和并作为合计金额。
  5. 选中第一列选框后，同时修改商品数量，合计金额也随着改变。
  6. 实现点击删除。
  7. 点击去结算时，判断有没有选中商品，选中后才可结算。在这里插入图片描述

功能实现：

  • a. 在选框的选中状态发生改变和商品数量发生改变时，会调用统计商品总类和合计金额的函数，更新总数和合计。

  • b. 点击链接增加或减少商品数量。

    • 在链接处使用添加onclick方法和type属性，type属性值为商品的数量，onclick的方法的参数为购物车tid和当前的type的值(this.type)。
    • 设置显示数量的input的框的id为“num_${trolley.tid}”，即为动态的，id的后缀为购物车tid，其value为商品数量。
    • 在修改商品数量函数中将购物车tid和数量传入后台，修改数量成功后返回，然后根据购物车tid修改显示数量的input的value。
    • 设置价格标签的id为"price_美元符{trolley.tid}"，小计标签的id为“prices_total_${trolley.tid}”，显示数量的input的value被修改后，根据购物车的tid来修改当前商品的小计。
    • 当在显示数量的input中输入有效数字时，调用onchange函数，参数为购物车的tid，根据tid获取input的id来去得到当前input的value值。使用tid和数量作为参数调用后台修改数量请求，请求处理成功后，根据购物车的tid来修改当前商品的小计。

  • c. 给删除标签设置onclick函数，参数为购物车的tid，点击后使用tid为参数调用后台删除请求完成删除。

  • d. 完整实现请参考页面代码和js代码。

完整js代码如下：

 <script type="text/javascript">
     //左侧选框状态改变时调用
     $(".ids").change(function(){
         //选中时统计总金额和商品种类
         changeTotalPriceAndNumber();
     })
     //统计总金额和商品种类
     function changeTotalPriceAndNumber(){
         //商品种类
         var sum=0;
         //统计合计金额
         var sumPrice=0; 
         //获取选中的数量
         $('input[name="ids"]:checked').each(function(){           
             var tid=$(this).val();
             var price=$("#prices_total_"+tid).html(); 
             sumPrice=sumPrice*1+price*1;                 
             sum=sum+1;            
         });
           
         //更新商品总数
         $("#sumSize").html(sum);
         //更新合计
         $("#close").html(sumPrice);
     }
     //点击减号时调用
     function reduceNumber(tid,num){
     		var tid=parseInt(tid);
     	    var num=parseInt(num);
     	    var price=$("#price_"+tid).html();
			if(num>1){
				$.ajax({
				     url:"${pageContext.request.contextPath }/trolley?key=reduceTrolleyCommodityNumber",
				     type: "post",
				     dataType:"text",
				     data:"number="+num+"&ids="+tid,
				     success:function(obj){
					     if(obj="ok"){
					            //更新数量
					            $("#num_"+tid).val(num-1);
					            //更新当前type值
					            $("#subtract_"+tid).attr("type",num-1);
					            //设置增加按钮的type值同步减少的type值
					            $("#plus_"+tid).attr("type",num-1);
					            //更新小计金额
					            $("#prices_total_"+tid).html((1*(num-1))*(price*1));
					            //数量改变时调用统计总金额和商品种类
					            changeTotalPriceAndNumber();
					            //window.location.reload();
					     }             
				     }
			}) 
		}        
     }
     //点击加号时调用
     function addNumber(tid,num){
     	 var tid=parseInt(tid);
     	 var num=parseInt(num);
     	 var price=$("#price_"+tid).html();
		 console.log(".num="+num+"tid="+tid+";price="+price);			 
		 $.ajax({
		     url:"${pageContext.request.contextPath }/trolley?key=addTrolleyCommodityNumber",
		     type: "post",
		     dataType:"text",
		     data:"number="+num+"&ids="+tid,
		     success:function(obj){
		         if(obj="ok"){
		              //更新数量
		              $("#num_"+tid).val(num+1);
		              //更新当前type值
		              $("#plus_"+tid).attr("type",num+1);
		              //设置减少按钮的type值同步增加按钮的type值
		              $("#subtract_"+tid).attr("type",num+1);
		              //更新小计金额
					  $("#prices_total_"+tid).html((1*(num+1))*(price*1));
					  //数量改变时调用统计总金额和商品种类
					  changeTotalPriceAndNumber();
		         }             
		     }
		 })
     }
     //直接修改商品数量时调用
     function changeNumber(tid){
         //var tid=parseInt(tid);
         var num=parseInt($("#num_"+tid).val());
         var price=$("#price_"+tid).html();
         if(num<1){
              //设置数量为1
              $("#num_"+tid).val(1);
              alert("至少有一个商品!")
         }         
         $.ajax({
		     url:"${pageContext.request.contextPath }/trolley?key=changeTrolleyCommodityNumber",
		     type: "post",
		     dataType:"text",
		     data:"number="+num+"&ids="+tid,
		     success:function(obj){
		         if(obj="ok"){
		              //更新小计金额		         		              		              
		              $("#prices_total_"+tid).html((1*num)*(price*1));		               
		         }             
		     }
		 })         
     }
     //点击删除时调用
     function delTrolleyCommodityByTid(tid){
         if(confirm("确认要删除选中的数据吗")){
	         var tid=parseInt(tid);
	         $.ajax({
			     url:"${pageContext.request.contextPath }/trolley?key=delTrolleyCommodityByTid",
			     type: "post",
			     dataType:"text",
			     data:"ids="+tid,
			     success:function(obj){
			         if(obj="ok"){		         		              		              
			              window.location.reload();	               
			         }             
			     }
			 })
         }
     }
     //点击去结算时调用
     function pay(){      
         var num= $(".ids:checked").length;
         var ids=[];
         var sumSize=$("#sumSize").html();
         var sumPrice=$("#close").html();                 

         if(sumSize==0||sumPrice==0){
             alert("请先购物再结算!");
             return;
         }
         
         //从购物车获取选中的商品
         $('input[name="ids"]:checked').each(function(){
             ids.push($(this).val());            
         });
         //如果没有勾选就提示
	     if(num==0){
	         alert("请先勾选需要结算的商品!"); 	         
	         return;
	     }
         console.log(ids);      
         window.location="${pageContext.request.contextPath}/orders?key=insertOrders&sumPrice="+sumPrice+"&sumNum="+sumSize+"&ids="+ids;
     }  
 </script>
墨明&棋妙
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp 购物车 .
04-23
jsp 做的一个购物车一起交流 .
使用JSP实现商场购物车模块
weixin_34362991的博客
06-09 174
  这些日子，学习JSP，只要找到一个小模块来试试你的手：     这里是实现车模块结果页面截图： 图1. 产品显示页面 通过此页面进行产品选择。增加到购物车   图2 .购物车页面   图3 . 商品数量设置   好了，先不贴图了，直接上代码。先看看项目的文档结构把（麻雀虽小。五脏俱全）：   整个项目包括三个类，两个JSP页面。以下分别把他们的代码...
基于Java、Jsp实现购物车的功能
有没有料，进来看看就知道！
07-13 4553
先看效果图： 实现代码： index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </he..
jsp 购物车
yyongsheng的博客
06-10 768
购物车                 .selMemInput{background-color:#fff;color:#666666;border:0px;width:160px;box-sizing:border-box;height:26px;line-height:20px;}   .mallBgSel{background:url(${ctx}/imag
jsp购物车
cxh_dream的专栏
12-03 2745
package buyList; class buyList{public String name;public int id;public String price;public String user_name;}  增加购物车：add1.jsp%@page import="buyList.buyList"%>%@page import="java.
JSP中EL表达式的用法详解(必看篇)
10-20
在JavaServer Pages (JSP) ...总结起来，EL表达式是JSP开发中的重要工具，它提高了代码的可读性和维护性，减少了脚本元素的使用，使JSP页面更加整洁。通过熟悉EL的语法和特性，开发者可以更高效地处理JSP页面中的数据。
jsp实现简易购物车
09-15
它提供了一个基础的实践平台，帮助开发者理解如何在实际应用中使用JSP来实现电商网站的关键功能。对于学习JSP和Web开发的初学者而言，这是一个很好的实战项目，可以帮助他们巩固理论知识，并提升动手能力。
EL表达式详解教程
05-13
### EL表达式详解教程 #### 一、EL表达式的简介 ...通过使用EL表达式，开发者可以减少对JSP Scriptlet的依赖，提高代码的可维护性和扩展性。掌握EL表达式的语法和特性对于Web开发人员来说是非常重要的。
JSP-JavaBean 简单实现初学购物车功能
11-28
在本教程中，我们将深入探讨如何使用JSP和JavaBean技术来实现一个简单的购物车功能。这非常适合初学者，因为它提供了清晰的步骤和文档，帮助理解这两种技术在实际项目中的应用。首先，让我们了解一下JSP（JavaServer...
jsp与servlet实现购物车
04-16
- **JSP页面**：使用JSP标签库（如JSTL）和EL表达式，简化页面的编程，展示动态数据。 - **数据库交互**：如果需要持久化存储订单信息，可以使用Java的JDBC API连接数据库，进行CRUD操作。 在项目的"ShoppingCart...
jsp购物车jsp购物车jsp购物车jsp购物车
06-24
sqlserver2000+jsp+tomcat
纯jsp购物车
07-03
内含数据库，采用office access，配置只需添加数据源即可
jsp实现的购物车系统
06-26
用jsp技术实现购物车，能够实现购物车、用户登录及注册、结帐等应用。
购物车（JSTL实现）
02-22
一个网络购物车代码，能够实现网络购物车的基本功能，对于学习jsp，尤其是jstl有一定的帮助
jsp购物车系统（mysql数据库）
06-27
这个是我自己的期末设计作业，里面还有数据库文件，东西很全，还有设计文档，不可多得的好东西哦 08电商1班 0820420101 浙江财经学院
JSP——购物车
qq_45686696的博客
10-14 4443
JSP—购物车 主页面（buy.jsp） <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...
javaBean+EL+JSTL制作的购物车
08-05
实例——jsp 无脚本技术实现的购物车。利用javaBena EL表达式 和JSTL 标准标签实现jsp无脚本技术实现的购物车，拥有详细的代码和解释！
JavaWEB15EL+JSTL实现购物车
weixin_66277116的博客
04-23 476
一.修改思路 二. 完整的购物车项目（EL+JSTL）
JSP实现购物车系统
12-05
利用 jsp 、 javabean 、 servlet 、session等知识点，结合相关设计模式、 以及软件工程的相关知识， 设计一个网站购物车， 用于记录客户的购物订单， 并能对购物车中商品信息进行查询、修改、删除、清空等操作，商品信息 存储在数据库中。 具体要实现的功能如下： 1 ：显示商品展示界面、操作成功界 面、购物车展示界面等界面。 2 ：商品信息。 3 ：对商品信息能够 进行查询、 修改、 删除、 清空等操作。 4 ： 使用 MVC 设计模式 （ View(jsp) 、 Model(javaBean) 、 Controller(servlet) ）。 5：购物车信息分页显示。”
使用Java，jsp和el表达式实现一个添加购物车功能
最新发布
05-04
首先，在JSP页面中，我们需要创建一个表单来接收用户选择的商品信息，如下所示： ``` <form method="POST" action="addtocart.jsp...在购物车页面中，我们可以使用EL表达式来遍历购物车中的商品列表并显示它们的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值