如何从前台发送集合数据到后台并保存数据库

待我称王封你为后i 2021-09-17 05:20 250阅读 0赞

**本博客使用的是layui前端框架**

### 1. html页面代码 ###

<div class="layui-row layui-col-space15">
    	<div class="layui-col-md12">
    		<div class="layui-card">
    			<div class="layui-card-header layui-bg-black">商品清单</div>
    			<div class="layui-card-body">
    				<table id="product_list" lay-filter="product_list">
    					<div class="layui-input-inline">
                     				 <div id="test-laydate-normElem" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;" lay-key="14"></div>
                   			</div>
    					<thead>
    						<tr>									
    							<th lay-data="{field:'prodId', width:100}">商品编号</th>
    							<th lay-data="{field:'prodName', width:160}">商品名称</th>
    							<th lay-data="{field:'prodUnit', width:100}">单位</th>
    							<th lay-data="{field:'prodUnitPrice', width:100}">单价</th>
    							<th lay-data="{field:'prodNum', width:100}">数量</th>
    							<th lay-data="{field:'prodTotalPrice', width:150}">金额</th>
    							<th lay-data="{field:'prodRemark', width:250}">单据备注</th>
    							<th lay-data="{fixed : 'right', title :'操作',toolbar : '#prodlist-table-tool', width : 150}"></th>
    						</tr>
    					</thead>						
    					<tbody id = "prodTd">
    					</tbody>
    				</table>
    			</div>
    
    			<div class="layui-card">
    				
    				<form id="product_submit" class="layui-form layui-card-header layuiadmin-card-header-auto">
    					<div class="layui-form-item">
    						<div class="layui-inline">
    							<label class="layui-form-label"><h4>付款金额</h4></label>
    							<div class="layui-input-block">
    								<input id = "prodTotalPrice" type="text" name="needPay" placeholder="请输入"
    									autocomplete="off" class="layui-input">
    							</div>
    						</div>
    						
    						<div class="layui-inline">
    						<label class="layui-form-label">退款账户</label>
    						<div class="layui-input-block">
    							<input type="text" id="accountName" name="accountName"
    								lay-filter="accountName" placeholder="请输入" autocomplete="off"
    								class="layui-input"> 
    								<input type="hidden" id="accountId"
    								name="accountId" lay-filter="accountId">
    						</div>
    					</div>
    													
    					<div class="layui-inline">
    						<button id="product_submit" lay-submit lay-filter="product_submit" class="layui-btn layui-btn-normal">销售退货申请</button>
    						<button class="layui-btn layui-btn-warm">再此申请</button>
    					</div>
    					</div>
    					
    				</form>
    				 
    				<div class="layui-card-body"></div>
    				
    			</div>
    		</div>
    	</div>
    </div>
    </div>
    </div>

### 2. js代码 ###

form.on('submit(product_submit)', function () {
    
    		var handlerId = $('#employeeId').val();
    		var fromCompanyId = $('#companyId').val();
    		var warehouseid = $('#houseId').val();
    		var accountId = $('#accountId').val();
    		var billRemark = $('#remarkName').val();
    		var prodTotalPrice1 = 0;
    		
    		var tr = $("#prodTd tr");		
    		for (var i = 0; i <tr.length; i++) {
    			var tds = $(tr[i]).find("td");
    			var result= new Object();	
    			
    			result.prodNumber = tds.eq(4).text(),
    			result.prodPrice = tds.eq(3).text(),
    			prodTotalPrice1 += Number(tds.eq(5).text()),
    			result.prodTotalPrice=prodTotalPrice1,
    			result.remark = tds.eq(6).text(),
    			result.productId = tds.eq(0).text(),
    			
    			billDetailList.push(result);
    			$('#prodTotalPrice').val(prodTotalPrice);
    			
    		}
    		var bill = {billRemark,	prodTotalPrice,accountId,fromCompanyId,handlerId,warehouseid};
    		bill.saleReturnBillDetailVOList = billDetailList;
    		
    		var saleReturnBillTotalVO = JSON.stringify(bill);
    		
    		$('#prodTotalPrice').val(prodTotalPrice);
    		
    		$.ajax({
    			url: context_path + '/saleReturnBill/saveBill',
    			type: "post",
    			contentType : "application/json;charsetset=UTF-8",//必须
    			data: saleReturnBillTotalVO, 
    			dataType: 'json',
    			success: function () {
    				layer.open({
    					  content: '<h2>申请提交成功</h2>',
    					  yes: function(index, layero){
    					    //do something
    					    layer.close(index); //如果设定了yes回调，需进行手工关闭
    					  }
    					});        
    					       
    			},
    			error: function(){
    				layer.open({
    					  content: '<h2>申请提交失败</h2>',
    					  yes: function(index, layero){
    					    //do something
    					    layer.close(index); //如果设定了yes回调，需进行手工关闭
    					  }
    				}); 
    			}
    		});
    		
    		return false;
    	});

### 3. controller层 ###

/**
    	 *  保存退货单据
    	 * @return
    	 */
    	@RequestMapping(value = "/saveBill", method = RequestMethod.POST)
    	@ResponseBody
    	public Result<?>  saveSaleReturnBill(@RequestBody SaleReturnBillTotalVO saleReturnBillTotalVO){
    		
    		saleReturnBillService.saveBill(saleReturnBillTotalVO);
    		//System.out.println(saleReturnBillTotalVO);
    		Result<?> result = new Result<>(200, "SUCCESS", 0, null);
    		return result;
    	}

### 4. Service 层 ###

/**
    	 * 	保存退货单据数据
    	 * @return
    	 */
    	@Transactional
    	public void saveBill(SaleReturnBillTotalVO saleReturnBillTotalVO){
    
    		SaleReturnBill saleReturnBill = new SaleReturnBill();
    		saleReturnBill.setDate(new Date());
    		saleReturnBill.setAccount(accountDao.findById(saleReturnBillTotalVO.getAccountId()).get());
    		saleReturnBill.setFromCompany(companyDao.findById(saleReturnBillTotalVO.getFromCompanyId()).get());
    		saleReturnBill.setHandler(employeeDao.findById(saleReturnBillTotalVO.getHandlerId()).get());
    		saleReturnBill.setToWarehouse(warehouseDao.findById(saleReturnBillTotalVO.getWarehouseid()).get());
    		saleReturnBill.setRemark(saleReturnBillTotalVO.getBillRemark());
    		saleReturnBill.setTotalPrice(saleReturnBillTotalVO.getTotalPrice());
    		saleReturnBill.setProcessState(ProcessUtils.PROCESS_PHASE_DETAIL_UNSTART);
    		
    		saleReturnBilllDao.save(saleReturnBill);
    		
    		List<SaleReturnBillDetailVO> prodVOList  = saleReturnBillTotalVO.getSaleReturnBillDetailVOList();
    		if(prodVOList!=null) {
    			for(SaleReturnBillDetailVO saleReturnBillDetailVO : prodVOList) {
    				SaleReturnBillDetail  saleReturnBillDetail =  new SaleReturnBillDetail();
    				saleReturnBillDetail.setProdNumber(saleReturnBillDetailVO.getProdNumber()); 
    				saleReturnBillDetail.setProdPrice(saleReturnBillDetailVO.getProdPrice());
    				saleReturnBillDetail.setProdTotalPrice(saleReturnBillDetailVO.getProdTotalPrice());
    				saleReturnBillDetail.setProduct(productDao.findById(saleReturnBillDetailVO.getProductId()).get());
    				saleReturnBillDetail.setRemark(saleReturnBillDetailVO.getRemark());
    				saleReturnBillDetail.setSaleReturnBill(saleReturnBill);
    				
    				saleReturnBillDetailDao.save(saleReturnBillDetail);
    			}	
    		}
    	
    	}

### 5. dao ###

**使用的是jpa**