angularJs 從前端到後端 json 串傳參
阿新 • • 發佈：2018-12-16
<%@ 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()); } }