遍歷表格中的input轉化爲json數據傳到後臺解析實現一些操作

首先是頁面，頁面簡單的畫出來是這一種

我需要把用戶Id和該用戶的對應一行的值傳到後臺保存到數據庫中。

               <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]'"
									οnblur="validateScore(${subjectScore},this)"
									class="easyui-validatebox"/>
						</td>
					</c:forEach>
				</tr>
			</c:forEach>
		</table>

這個是繪製表格的一些代碼，我要遍歷表格的每一行的input的值；然後寫成json對象傳到後臺，在後臺進行處理。

function 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");
                  }
		   }
		});
	};

在後臺接收處理json

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的話就是照着傳入參數，截取字符串就可以了。然後就可以對對象進行操作。