angularJs 从前端到后端 json 串传参

最新推荐文章于 2024-08-03 21:03:55 发布

菜鸟柱子

最新推荐文章于 2024-08-03 21:03:55 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： angular

本文链接：https://blog.youkuaiyun.com/xinpz/article/details/83146696

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个基于教育云平台的账单录入系统，详细展示了账单生成过程，包括学生信息选择、费用明细设定及订单生成。系统采用AngularJS进行前端开发，实现动态交互与数据绑定，同时利用jQuery和layui等库增强用户体验。

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

<%@ 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>
<!-- 菜单展开 start -->
<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>
<!-- 菜单展开end -->



<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());
	}

}