angularJs 从前端到后端 json 串传参

清疚 2022-05-10 13:33 411阅读 0赞

<%@ page language="java" pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    	String basePath = request.getScheme() + "://"
    			+ request.getServerName() + ":" + request.getServerPort()
    			+ path + "/";
    %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <c:set var="ctx" value="${pageContext.request.contextPath}" />
    <html>
    
    <head>
    <base href=" <%=basePath%>">
    <meta charset="UTF-8">
    <title>EDU教育云平台</title>
    <link rel="stylesheet" href="${ctx}/css/pc-edu-css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/pc-edu-css/xzdd.css">
    <%-- <script src="${ctx}/js/jquery-3.0.0.js"></script> --%>
    <script type="text/javascript" src="${ctx}/js/pc-edu-js/jquery.min.js"></script>
    <script src="${ctx}/plugins/angularjs/angular.min.js"
    	type="text/javascript">
    	
    </script>
    </head>
    
    <body class="layui-layout-body" ng-app="insertOrder"
    	ng-controller="insertOrderController" ng-init="findGradeList()">
    	<div class="layui-layout layui-layout-admin">
    
    		
    		<jsp:include page="header.jsp" flush="true" />
    		
    
    		
    		<div class="layui-body">
    			<span id="content-title">账单录入</span>
    			<div style="height:100%;overflow:auto;background:#fff;">
    				<div style="width:100%;line-height:40px;">
    					<p class="tit">订单信息</p>
    					<div class="title">
    						<span style="margin-right:30px;">订单类型选择:</span> <input
    							type="radio" id="radio1" name="radio" checked="checked" value=1 /><label
    							for="radio1">缴费</label> <input type="radio" id="radio2"
    							name="radio" value=0 /><label for="radio2">退费</label>
    						<button class="sumtit" ng-click="createOrder();">订单生成</button>
    					</div>
    					<hr>
    					<div class="left">
    						年级：<select size="1" id="grade">
    							<option value="">请选择</option>
    							<option ng-repeat="grade in gradeList"
    								ng-click="findClassList(grade);">{
       {grade.gradeName}}</option>
    						</select> <br> 班级：<select size="1" id="classname">
    							<option value="">请选择</option>
    							<option ng-repeat="class in classList"
    								ng-click="findStudentList(class);">{
       {class.className}}</option>
    						</select> <br> 学生：
    
    						<div id="div1" class="students">
    							<div ng-repeat="student in studentList">
    								<input type="checkbox" style="margin-left:15px;"
    									value="{
       {student.xsid}}" /> {
       {student.name}}<span
    									style="font-size:12px;color:#777;">({
       {student.sfzhm}})</span>
    							</div>
    						</div>
    						<input id="btn2" type="button" class="all" value="取消" /> <input
    							id="btn1" type="button" class="all" value="全选" />
    
    					</div>
    					<div class="middle"></div>
    					<div class="right">
    						<div class="titname">
    							费用名称<img id="AddMoreFileBox" class="btn btn-info"
    								src="${ctx}/images/pc-edu-images/jfaddicon.png" max-lenght=10>
    							<div id="InputsWrapper">
    								<div class="addone">
    									<input type="text" name="mytext[]" id="field_1"
    										placeholder="费用名称 1" maxlength="10" /><input type="number"
    										name="mytext[]" id="money_1" placeholder="费用金额 1" /><br>
    									<select size="1" id="month_1"><option value="0"
    											style="color:#999;">请选择缴费月份</option>
    										<option value="1月份">1月份</option>
    										<option value="2月份">2月份</option>
    										<option value="3月份">3月份</option>
    										<option value="4月份">4月份</option>
    										<option value="5月份">5月份</option>
    										<option value="6月份">6月份</option>
    										<option value="7月份">7月份</option>
    										<option value="8月份">8月份</option>
    										<option value="9月份">9月份</option>
    										<option value="10月份">10月份</option>
    										<option value="11月份">11月份</option>
    										<option value="12月份">12月份</option>
    									</select><input type="text" name="mytext[]" maxlength="30" id="text_1"
    										placeholder="备注 1" /><a href="#" class="removeclass"><img
    										src="${ctx}/images/pc-edu-images/jfjianicon.png"></a>
    								</div>
    							</div>
    						</div>
    
    					</div>
    
    
    				</div>
    			</div>
    		</div>
    		
    		<div class="layui-footer">© 西安远眺网络科技有限公司</div>
    	</div>
    </body>
    
    <script src="${ctx}/js/layui/layui.all.js"></script>
    <script>
    	window.onload = function() {//先从html文档中获取oDiv元素；再从oDiv元素中获取input
    		var oBtn1 = document.getElementById('btn1');
    		var oBtn2 = document.getElementById('btn2');
    		var oBtn3 = document.getElementById('btn3');
    		var oDiv = document.getElementById('div1');
    		var aCh = oDiv.getElementsByTagName('input');//getElementsByTagName容易写错
    		oBtn1.onclick = function() {
    			for (var i = 0; i < aCh.length; i++) {//当上面条件成立的时候，下面语句会一直执行，直到条件不成立为止
    				aCh[i].checked = true;
    			}
    			;
    		};
    		oBtn2.onclick = function() {//当上面条件成立的时候，下面语句会一直执行，直到条件不成立为止
    			for (var i = 0; i < aCh.length; i++) {
    				aCh[i].checked = false;
    			}
    			;
    		}
    
    	}
    </script>
    
    <script>
    	var FieldCount = 1; //to keep track of text box added
    	$(document)
    			.ready(
    					function() {
    						var MaxInputs = 8; //maximum input boxes allowed
    						var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
    						var AddButton = $("#AddMoreFileBox"); //Add button ID
    						var x = InputsWrapper.length; //initlal text box count
    
    						$(AddButton)
    								.click(
    										function(e) //on add input button click
    										{
    											if (x <= MaxInputs) //max input box allowed
    											{
    												FieldCount++; //text box added increment
    												//add input box
    												$(InputsWrapper)
    														.append(
    																'<div class="addone"><input type="text" maxlength="10" name="mytext[]"  id="field_'+ FieldCount +'"  placeholder="费用名称 '+ FieldCount +'"/><input type="number" name="mytext[]" id="money_'+ FieldCount +'"  placeholder="费用金额 '+ FieldCount +'"/><br> <select size="1"  id="month_'+ FieldCount +'"> <option value="0" style="color:#999;">请选择缴费月份</option> 	<option value="1月份">1月份</option> <option value="2月份">2月份</option> <option value="3月份">3月份</option><option value="4月份">4月份</option> <option value="5月份">5月份</option> <option value="6月份">6月份</option><option value="7月份">7月份</option> <option value="8月份">8月份</option> <option value="9月份">9月份</option><option value="10月份">10月份</option> <option value="11月份">11月份</option> <option value="12月份">12月份</option></select><input type="text" name="mytext[]" maxlength="30" id="text_'+ FieldCount +'" placeholder="备注 '+ FieldCount +'"/><a href="#" class="removeclass"><img src="${ctx}/images/pc-edu-images/jfjianicon.png"></a></div>');
    												x++; //text box increment
    											}
    											return false;
    										});
    						$("body").on("click", ".removeclass", function(e) { //user click on remove text
    							if (x > 1) {
    								$(this).parent('div').remove(); //remove text box
    								x--; //decrement textbox
    							}
    							return false;
    						})
    					});
    </script>
    <script>
    	//JavaScript代码区域
    	layui.use('element', function() {
    		var element = layui.element;
    
    	});
    
    	layui.use('carousel', function() {
    		var carousel = layui.carousel;
    		//建造实例
    		carousel.render({
    			elem : '#test1',
    			width : '100%' //设置容器宽度
    			,
    
    			arrow : 'always' //始终显示箭头
    		//,anim: 'updown' //切换动画方式
    		});
    	});
    </script>
    
    
    
    
    <script type="text/javascript">
    	var app = angular.module('insertOrder', []);
    	app.config(function($httpProvider) {
    		$httpProvider.defaults.headers.post = {
    			'Content-Type' : 'application/x-www-form-urlencoded',
    			'charset' : 'utf-8'
    		}
    	})
    	app.controller('insertOrderController', function($scope, $http) {
    		//页面初始化的时候，查找年级信息
    		$scope.findGradeList = function() {
    			$http.get("${ctx}/ManagerSchool/findGradeTable").then(
    					function success(response) {
    						$scope.gradeList = response.data;
    					}, function error(response) {
    						layer.alert('查询年级数据失败!!!', {
    							icon : 5
    						});
    					});
    		}
    
    		//根据年级id查询该年级的班级数据
    		$scope.findClassList = function(selectGrade) {
    			console.log("查询班级=" + selectGrade.gid);
    			//获取班级id
    			var gradeId = selectGrade.gid;
    			$http.get("${ctx}/ManagerSchool/findClassTable?gradeId=" + gradeId)
    					.then(function success(response) {
    						$scope.classList = response.data;
    					}, function error(response) {
    						layer.alert('查询班级数据失败!!!', {
    							icon : 5
    						});
    					});
    		}
    
    		//根据班级id查询学生List
    		$scope.findStudentList = function(classObj) {
    			console.log("查询学生list=" + classObj.cid);
    			//获取班级id
    			var classId = classObj.cid;
    			$http.get(
    					"${ctx}/orderEnter/selectStudentsByClassId?classId="
    							+ classId).then(function success(response) {
    				$scope.studentList = response.data;
    				console.log("学生list=" + $scope.studentList);
    			}, function error(response) {
    				layer.alert('查询学生数据失败!!!', {
    					icon : 5
    				});
    			});
    		}
    
    		//根据班级id查询学生List
    		$scope.findStudentList = function(classObj) {
    			console.log("查询学生list=" + classObj.cid);
    			//获取班级id
    			var classId = classObj.cid;
    			$http.get(
    					"${ctx}/orderEnter/selectStudentsByClassId?classId="
    							+ classId).then(function success(response) {
    				$scope.studentList = response.data;
    				console.log("学生list=" + $scope.studentList);
    			}, function error(response) {
    				layer.alert('查询学生数据失败!!!', {
    					icon : 5
    				});
    			});
    		}
    
    		//订单生成方法
    		$scope.createOrder = function() {
    
    			//1.获取选中单选框的值
    			var jtbs = $("input[name='radio']:checked").val();
    			console.log("交退费标识=" + jtbs);
    
    			//2.
    			var studentIdList = new Array();
    			$("input[type=checkbox]:checked").each(function(i) {
    				studentIdList[i] = $(this).val();
    			});
    			console.log("studentIdList=" + studentIdList);
    
    			if (studentIdList == null || studentIdList == "") {
    				$.alertView("请选择账单学生！！");
    				return false;
    			}
    
    			//3.获取订单list信息
    
    			console.log("费用条数FieldCount=" + FieldCount);
    			var orderList = new Array();
    
    			for (var i = 1; i <= FieldCount; i++) {
    				//1.费用名称
    				var xmmc = $("#field_" + i).val();
    				console.log("费用名称" + i + "=" + xmmc);
    				if (xmmc == null || xmmc == "") {
    					$.alertView("*请输入费用名称！");
    					return false;
    				}
    				//2.费用金额
    				var je = $("#money_" + i).val();
    				console.log("费用金额" + i + "=" + je);
    				if (je == null || je == "") {
    					$.alertView("*请输入费用金额！");
    					return false;
    				}
    				//3.订单月份
    				var ddyf = $("#month_" + i + " option:selected").val();
    				console.log("订单月份" + i + "=" + ddyf);
    				if (ddyf == null || ddyf == "") {
    					$.alertView("*请选择订单月份！");
    					return false;
    				}
    				//4.备注
    				var ddbz = $("#text_" + i).val();
    				console.log("备注" + i + "=" + ddbz);
    
    				//组装订单
    				var order = {
    					//费用名称
    					"xmmc" : xmmc,
    					//费用金额
    					"je" : je,
    					//订单月份
    					"ddyf" : ddyf,
    					//备注
    					"ddbz" : ddbz
    				};
    				orderList.push(order);
    			}
    
    			var orderEnterBobj = {
    				payBack : jtbs,
    				studentIdList : studentIdList,
    				orderList : orderList
    			}
    			/* 将数组转换为json类型的字符串 */
    			//var orderListJSON = JSON.stringify(orderList);
    			var orderEnterBobjJson = JSON.stringify(orderEnterBobj);
    			console.log("订单list信息=" + orderList);
    
    			/* if (isCardNo(managerIdCard) == false) {
    				$.alertView("您输入的身份证号格式不正确!!");
    				return false;
    			} */
    
    			$http({
    				method : 'post',
    				data : $.param({
    					orderEnterBobj : orderEnterBobjJson
    					
    				}),
    				//transformRequest: angular.identity, //使用angular传参认证
    				headers : {
    					'Content-Type' : 'application/x-www-form-urlencoded;charset=utf-8'
    					//'Content-Type' : 'application/json;charset=utf-8'
    				},
    				url : '${ctx}/orderEnter/insertOrdetList',
    			}).then(function(response) {
    				var data = response.data;
    				if (data) {
    					$.alertView("账单录入成功！！");
    				} else {
    					$.alertView("账单录入失败！！");
    				}
    			});
    		}
    	});
    </script>
    </html>

package com.zichen.xhkq.controller.orderManage;
    
    import java.util.List;
    
    import javax.annotation.Resource;
    import javax.servlet.http.HttpSession;
    
    import net.sf.json.JSONArray;
    
    import org.apache.log4j.LogManager;
    import org.apache.log4j.Logger;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import com.alibaba.fastjson.JSONObject;
    import com.fasterxml.jackson.core.JsonParser;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.zichen.xhkq.bojo.OrderEnterBobj;
    import com.zichen.xhkq.exception.CustomException;
    import com.zichen.xhkq.pojo.Order;
    import com.zichen.xhkq.pojo.Student;
    import com.zichen.xhkq.service.mine.OrderService;
    import com.zichen.xhkq.service.myclass.StudentService;
    import com.zichen.xhkq.tools.CmUtil;
    
    @Controller
    @RequestMapping("/orderEnter")
    public class OrderEnterController {
    	private static Logger log = LogManager
    			.getLogger(OrderEnterController.class);
    
    	@Resource
    	private OrderService orderService;
    	@Resource
    	private StudentService studentService;
    
    
    	@RequestMapping("/test23")
    	@ResponseBody
    	// /@PostMapping(value = "/orderEnter/insertOrdetList",consumes =
    	// "application/json")
    	public void test23(@RequestParam("orderEnterBobj") String orderEnterBobj) {
    		System.out.println("test23======================================="
    				+ JSONObject.toJSONString(orderEnterBobj));
    		JSONObject jsonObject = JSONObject.parseObject(orderEnterBobj);
    
    		OrderEnterBobj orderEnterBobj123 = (OrderEnterBobj) JSONObject
    				.toJavaObject(jsonObject, OrderEnterBobj.class);
    
    		System.out.println("test23======================================="
    				+ JSONObject.toJSONString(orderEnterBobj123));
    		System.out.println("test23======================================="
    				+ JSONObject.toJSONString(orderEnterBobj123.getOrderList()));
    		System.out.println("test23======================================="
    				+ JSONObject.toJSONString(orderEnterBobj123.getPayBack()));
    		System.out
    				.println("test23======================================="
    						+ JSONObject.toJSONString(orderEnterBobj123
    								.getStudentIdList()));
    	}
    
    	/**
    	 * 订单录入
    	 * 
    	 * @param orderList
    	 * @param session
    	 * @return
    	 * @throws CustomException
    	 */
    	@RequestMapping("/insertOrdetList")
    	@ResponseBody
    	// /@PostMapping(value = "/orderEnter/insertOrdetList",consumes =
    	// "application/json")
    	public boolean insertOrdetList(
    			@RequestParam("orderEnterBobj") String orderEnterBobj,
    			HttpSession session)  {
    		try {
    		log.info("insertOrdetList入参=" + JSONObject.toJSONString(orderEnterBobj));
    
    		JSONObject jsonObject = JSONObject.parseObject(orderEnterBobj);
    
    		OrderEnterBobj orderEnter = (OrderEnterBobj) JSONObject.toJavaObject(
    				jsonObject, OrderEnterBobj.class);
    
    		Integer payBack = orderEnter.getPayBack();
    		List<Integer> studentIdList = orderEnter.getStudentIdList();
    		List<Order> orderList = orderEnter.getOrderList();
    		// 1.入参校验
    		// 交退费标识
    		if (CmUtil.isEmpty(payBack)) {
    			
    				throw new CustomException("订单录入入参交退费标识为空！");			
    		}
    
    		// studentIdList
    		if (CmUtil.isEmpty(studentIdList)) {
    			throw new CustomException("订单录入入参studentIdList为空！");
    		}
    
    		// b.校验orderList
    		for (Order order : orderList) {
    
    			if (validateInsertOrder(order)) {
    				throw new CustomException("订单录入入参Order字段不完整");
    			}
    		}
    
    		// 2.从session中获取schoolId 和schoolName
    		Integer schoolId = (Integer) session.getAttribute("schoolId");
    		String schoolName = (String) session.getAttribute("schoolName");
    		if (CmUtil.isEmpty(schoolId)||CmUtil.isEmpty(schoolName)) {
    			throw new CustomException("session未获取到schoolId +schoolName ");
    		}
    
    		return orderService.insertOrdetList(schoolId,schoolName, orderList, studentIdList,
    				payBack);
    		
    		} catch (CustomException e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    			return false;
    		}
    	}
    
    	/**
    	 * 根据班级id主键查询学生list
    	 * 
    	 * @param ssbjid
    	 * @return
    	 * @throws CustomException
    	 */
    	@RequestMapping("/selectStudentsByClassId")
    	@ResponseBody
    	public List<Student> selectStudentsByClassId(
    			@RequestParam("classId") Integer classId) throws CustomException {
    
    		// 1.入参校验
    		if (CmUtil.isEmpty(classId)) {
    
    			throw new CustomException("selectStudentsByClassId入参ssbjid为空！");
    		}
    
    		// 2. 查询studentList
    		return studentService.selectBySsbjid(classId);
    
    	}
    
    	/**
    	 * 校验入参Order
    	 * 
    	 * @param order
    	 * @return
    	 */
    	private boolean validateInsertOrder(Order order) {
    		return CmUtil.isEmpty(order.getXmmc()) || CmUtil.isEmpty(order.getJe())
    				|| CmUtil.isEmpty(order.getDdyf());
    	}
    
    }