【js】收银系统（核心代码）

最新推荐文章于 2025-05-07 14:19:12 发布

花名时礼

最新推荐文章于 2025-05-07 14:19:12 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java js

本文链接：https://blog.youkuaiyun.com/tyrant_forever/article/details/97694721

Java 同时被 2 个专栏收录

66 篇文章

订阅专栏

19 篇文章

订阅专栏

本文介绍了一个基于Java的Web应用，用于商品扫描和结算过程。系统通过读取商品条形码，从数据库中检索商品信息，并实时更新购物车的商品列表及总金额。采用JSP页面进行前端展示，使用Ajax进行异步请求，实现商品信息的快速加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

checkout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<%@ include file="../common/common.jsp"%>
<link href="${ctxpath }/static/css/select.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="${ctxpath }/static/js/jquery.idTabs.min.js"></script>
<script type="text/javascript" src="${ctxpath }/static/js/select-ui.min.js"></script>
<script type="text/javascript" src="${ctxpath }/static/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="${ctxpath }/static/editor/kindeditor.js"></script>

<script type="text/javascript">

$(function(){
	var goodsarray = new Array();
	var i = -1;
	var flag = true;
	var sum = 0;
	var k = 0;
	$(".scinput1").keydown(function(event){
		if(event.keyCode ==13){
			$.ajax({
				url:"${ctxpath}/scanGoodsCode.action",
				data:{barCode:this.value},
				dataType:"JSON",
				type:"post",
				success:function(data){
					
					for(var j = 0; j <=i; j++){
						if(goodsarray[i].barCode == data.barCode){
							flag = false;
							k = j;
						}
					}
					
					var rowData = "<tr><td>" + data.barCode + "</td><td>" + data.goodsName + "</td><td>" + data.price +"</td><td>"+ data.count +"</td><td>" + data.unit + "</td><td>" + data.price * data.count + "</td></tr>";
					if(flag == true){						
						$("#goodsData").append(rowData);
						i++;
						goodsarray[i] = data;
	
					}else{
						goodsarray[i].count++;
						$("#goodsData").empty();
						for(var j = 0; j <= i; j++){
							var rowData1 = "<tr><td>" + goodsarray[j].barCode + "</td><td>" + goodsarray[j].goodsName + "</td><td>" + goodsarray[j].price +"</td><td>" +goodsarray[j].count+ "</td><td>" + goodsarray[j].unit + "</td><td>" + goodsarray[j].price * goodsarray[j].count + "</td></tr>";	
							
							$("#goodsData").append(rowData1);
						}
						
					}
					sum += goodsarray[k].price;
					$(".scinput1").val("");
					
					flag = true;
					
					
					document.getElementById("sum").innerText = sum;
				}
				
			});
		}
	});
	
	
	
	
	
});
</script>
</head>

<body class="sarchbody">

	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="#">首页</a></li>
    <li><a href="#">系统设置</a></li>
    </ul>
    </div>
    
    <div class="formbody">
    
    <div id="usual1" class="usual" style="height:400px"> 
    <div class="formtitle"><span>商品列表</span></div>
    <table class="tablelist">
    	<thead>
    	<tr>
        <th>商品编号<i class="sort"><img src="${ctxpath}/static/img/px.gif" /></i></th>
        <th>商品名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>单位</th>
        <th>金额</th>
        </tr>
        </thead>
        <tbody id="goodsData">
        </tbody>
    </table>
       
	</div> 
    <ul class="seachform1">
    	<li><label>商品编码</label><input name="" type="text" class="scinput1"/></li>
 
    	<li><label >总金额：</label><label id = "sum" ></label> </li>
    	<li class="sarchbtn"><label>&nbsp;</label><input name="" type="button" class="scbtn" value="结账"/></li>  
    </ul>
    </div>
</body>

</html>

ScanGoodsCoodServlet.java

package com.zzxtit.shop.casher.controller;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import com.google.gson.Gson;
import com.zzxtit.common.util.DBUtil;
import com.zzxtit.shop.casher.entity.GoodsInfo;

@WebServlet("/scanGoodsCode.action")
public class ScanGoodsCodeServlet extends HttpServlet{

	
	public void doPost(HttpServletRequest request, HttpServletResponse response) {
		response.setContentType("text/html;charset=utf-8");
		String barCode = request.getParameter("barCode");
		QueryRunner qr = new QueryRunner(DBUtil.getDS());
		String sql = "select id, bar_code barCode, goods_name goodsName, unit, price from goods_list where bar_code = ?";
		try {
			GoodsInfo gi = qr.query(sql, new BeanHandler<GoodsInfo>(GoodsInfo.class), barCode);
			gi.setCount(1);
			response.getWriter().write(new Gson().toJson(gi));
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}