遍歷表格中的input轉化為json資料傳到後臺解析實現一些操作
阿新 • • 發佈:2019-02-01
首先是頁面,頁面簡單的畫出來是這一種
我需要把使用者Id和該使用者的對應一行的值傳到後臺儲存到資料庫中。
這個是繪製表格的一些程式碼,我要遍歷表格的每一行的input的值;然後寫成json物件傳到後臺,在後臺進行處理。<table id="mainTable" style="width: 750px; overflow: scroll;" > <tr> <td>使用者名稱</td> <c:forEach items="${subjectNumberList}" var="subjectName"> <td colspan="2">${subjectName }</td> </c:forEach> </tr> <c:forEach items="${testRecordList}" var="testRecord" varStatus="i"> <tr> <td>${userList[i.index].name }<input type="hidden" value="${userList[i.index].userId }"/></td> <c:forEach items="${subjectScoreList}" var="subjectScore"> <td>${subjectScore}</td> <td><input type="text" style="width: 30px;" numberbox="true" data-options="required:true,validType:'length[1,4]'" onblur="validateScore(${subjectScore},this)" class="easyui-validatebox"/> </td> </c:forEach> </tr> </c:forEach> </table>
在後臺接收處理jsonfunction saveCredits(){ var dataJson="["; var userId = ""; var subjectScore = ""; $("#mainTable tr").each(function (index, domEle){// mainTable 下的tr userId = ""; subjectScore = ""; if(index != 0){//遍歷除去第一行的之外的所有input作為json資料傳入後臺 $(domEle).find("input").each(function(index,data){ if(index == 0){ userId = $(data).val(); }else{ if($(data).val() != "" && $(data).val() != null){//如果沒有輸入的情況下傳的值是0 subjectScore += "," + $(data).val(); }else{ subjectScore += "," + 0; } } }); if(!subjectScore.indexOf(",")){ subjectScore = subjectScore.substring(1); } dataJson += "{"+"\"userId\":\""+userId+"\","+"\"subjectScore\":\""+subjectScore+"\"},"; } }); if (dataJson.lastIndexOf(",")) { dataJson = dataJson.substring(0,dataJson.length -1); dataJson += "]"; } var testId = "${test.testId}"; $.ajax({ type: "POST", url: "action", data:{ data : dataJson, testId : testId }, success: function(result){ if (result.success){ $.messager.alert('成功提示',result.msg,"info",function(){ window.opener.doAction("****","../controller/url");//實現頁面成功之後的跳轉 window.close(); }); }else{ $.messager.alert('錯誤提示', result.msg,"error"); } } }); };
後面就可以對傳來的值進行一系列的處理和對資料庫操作。public PageResult<Object> teacherStudyassessSave( @RequestParam(value = "data", required = true) String data, @RequestParam(value = "testId", required = true) String testId){ PageResult<Object> pageResult = new PageResult<Object>(); /* 定義返回物件 */ JSONArray jsonArray = JSONArray.fromObject(data); /* 定義解析json陣列資料物件 */ Map<String,String> userSubjectScoreMap = new HashMap<String, String>(); /* 定義Map集合 */ List<String> userIdList = new ArrayList<String>(); /* 定義List集合 */ /* * 迴圈json陣列物件取出資料,放入Map中 * 迴圈json陣列物件取出使用者資料,放入List中 */ for(int i = 0; i < jsonArray.size(); i++){ userSubjectScoreMap.put(jsonArray.getJSONObject(i).getString("userId"),jsonArray.getJSONObject(i).getString("subjectScore")); userIdList.add(jsonArray.getJSONObject(i).getString("userId")); } }
下次可能用到的:遍歷表格,拼接json串,後臺對json的處理;這個只是感覺json方便一點。
繫結bean的話就是照著傳入引數,擷取字串就可以了。然後就可以對物件進行操作。