評教系統——學生評教提交

背景

　　上篇博客主要講了如何從後臺動態獲取考覈項目和考覈選項，這篇我們講下如何將學生的考覈項目和考覈選項對應起來提交到服務器進行處理。

　　繼上篇中，綁定考覈項目和考覈選項的時候，用的是JSTL和EL表達式通過兩次嵌套循環實現了綁定考覈項目和考覈選項。

<span style="font-size:14px;"><!--綁定考覈項目和每個考覈項目的選項 -->
<c:forEach items="${assessContentlist}" var="a"
	varStatus="status">
	<tr>
		<td><div id="${status.index+1}" name="assessSelectedDiv">
				<c:out value="${status.index+1}" />、${a.assessContent}<br>
				<c:forEach items="${a.weights}" var="b">
					<input type="radio" name="${a.id}" value="${b.id}"class="answer">${b.weightContent}	
					<br />
				</c:forEach>
			</div></td>
	</tr>
</c:forEach></span>

思路

　　在用JSTL表達式輸出考覈項目的時候，將考覈項目放在了div中，每個div的Id設置成數字<div

 id="${status.index+1}" name="assessSelectedDiv">，以便和循環變量聯繫起來。當學生選擇完畢之後，如何對

應的獲取到學生和考覈項目和考覈選項成了一個問題！後來查看生成的Html頁面，發現考覈項目和考覈選項都放在了

<tr>標籤中，有多少個考覈項目就有多少個<tr>標籤。通過獲取<tr>的數量來確定循環，然後在內循環中獲取對應的

數據，當對應的獲取到，放入JavaScript對象的各個屬性中。至此，開始着手實現。

實現：

  主要是Js的面向對象

<span style="font-size:14px;">function checkResult() {
	
	//獲取界面已經選擇的單選按鈕
	var selected = $(":radio:checked").length;
	//獲取應該評選的數量（後臺綁定過來的）
	var shoudSelected = document.getElementById("hidAssessProjectCount").value;

	//這是變量數組，用來存放一個一個的js對象
	var assessAndWeightList = [];

	//確定外邊大循環的次數
	var trlength = $("tr:gt(0)").length;

	for (i = 1; i <= trlength + 1; i++) {
		var count = 1;
		//獲取到了每個div
		var x = document.getElementById(i);
		//獲取某個div下面的input數量，然後循環
		var radioCount = x.getElementsByTagName("input").length;
		for (j = 0; j < radioCount; j++) {
			//判斷哪個input被選中了
			if (x.getElementsByTagName("input")[j].checked == true) {
			//獲取到所選擇的radio的值
			//定義一個對象變量：
			assessAndWeight = new Object();
			var weightId = x.getElementsByTagName("input")[j].value;
			var assessId = x.getElementsByTagName("input")[j].name;
			assessAndWeight.assessId = assessId;
			assessAndWeight.weightId = weightId;
			//獲取學生id，教師Id，課程Id，課程類型Id
			assessAndWeight.templateId = document.getElementById("templateId").value;
			assessAndWeight.studentId = document.getElementById("studentId").value;
			assessAndWeight.teacherId = document.getElementById("teacherId").value;
			assessAndWeight.courseId = document.getElementById("courseId").value;
			assessAndWeight.courseType = document.getElementById("courseTypeId").value;
			//將被選中的連同考覈項目Id一起放入數組中去。
			assessAndWeightList.push(assessAndWeight);

			} else {
			//用來判斷所給出的考覈項目的選項是否一個也沒有選擇。
			count++;
			}
			}
			//如果某個div下的radio一個也沒有選擇，那麼
			if (count == radioCount + 1) {
				alert("您第" + i + "道題沒有選擇");
				document.getElementById("tiaozhuan").href = "#" + i;
				document.getElementById('tiaozhuan').click();
				//設置一下div字體顏色,如果沒評的話，設置爲紅色
				//document.getElementById(i).style.color = "red";
				document.getElementById(i).style.cssText = "border: 1px solid red;";

				for (j = 0; j < radioCount; j++) {
				$("input").mousedown(
				function() {document.getElementById(i).style.color = "#000000";
				document.getElementById(i).style.cssText = "border: 0px solid red;";
				});
				}

				for (j = 0; j < radioCount; j++) {
				$("label").mousedown(
				function() {document.getElementById(i).style.color = "#000000";
				document.getElementById(i).style.cssText = "border: 0px solid red;";
				});
				}

				return false;
			}
		}

		//將獲取對象集合轉成Json對象結合
		//var stringResult=assessAndWeightList.serializeArray();
		var stringResult = JSON.stringify(assessAndWeightList);
		//alert(stringResult);
		var ifPj = document.getElementById("ifPj").value;
		$.ajax({
		type : "post",
		url : "${pageContext.request.contextPath}/studentAssessResult",
		data : {
			stringResult : stringResult,
			IfPj : ifPj
		},
		datatype : "json",
		success : function(data) {						
		<span style="white-space: pre;">	</span>window.location.href = "${pageContext.request.contextPath}/studentAssess";

			},
		error : function(data) {
			$.messager.alert("警告", "網絡故障！", "error");
			}
		})		
	}
</script></span>

controller處理：

　　

<span style="font-family:SimHei;"><span style="font-size:18px;">	</span><span style="font-size:14px;">@RequestMapping("/studentAssessResult")
	public String studentAssessResult(HttpServletRequest request,
			HttpServletResponse response) {
		try {

			// 獲取傳遞的Json組
			String jsonResultString = request.getParameter("stringResult");
			// 獲取傳遞的Json組
			String IfPj = request.getParameter("IfPj");
			// 將Json組轉成Json對象
			JSONArray jsonarray = JSONArray.fromObject(jsonResultString);
			// 將學生評價結果json轉換爲list
			List list = (List) JSONArray.toCollection(jsonarray,StudentAssessResult.class);

			studentAssessResultBean.saveEntitys(list);

			try {
				// 更新是否評教字段
				StudentTeachClass studentTeachClass = schoolTeachingBean
						.findEntityById(IfPj);
				studentTeachClass.setId(IfPj);
				studentTeachClass.setIsPj("是");
				schoolTeachingBean.updateIsPjOrIsKs(studentTeachClass);
				// 更新是否評教字段

			} catch (Exception e) {
				throw e;
			}

		} catch (Exception e) {
			throw e;
		}

		return "/studentAssess";
	}</span></span>

效果：

　　第一道體沒選擇

　　

　　跳轉到第一道題，並加上紅色邊框

　

　　選擇之後，紅框消失

　　主要的知識點：JavaScript中的對象和對象集合，Json轉換工具，還有就是Jquery 操作dom元素。