JQuery非同步提交表單(不使用jQuery.form外掛程式)

不用jQuery.form外掛程式也一樣能很方便地提交表單，只需要在頁面載入時定義表單提交時的動作就可以。

引入jQuery包是必須的；然後在$(document).ready(function() {})裡定義表單提交動作。

例(以下代碼為項目中的一小部分)：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/1.7.1/jquery.min.js"></script>

$(document).ready(function() {// 序列化主評論表單$("#mainReplayForm").submit(function() {content = $("#appraiseContent").val();var radioVal = $("input[type='radio']:checked").val();if(typeof(radioVal) == 'undefined') {alert("請為該資源打分");return false;} else $("#appraiseLevel").val(radioVal);if (content == '') {alert("評論不可為空");return false;} else {$("#itemId").val('${item.id}');$.ajax({url:'${pageContext.request.contextPath}/appraiseController/saveAppraise.do',data:$("#mainReplayForm").serialize(),//data: 'appraiseLevel=' + radioVal + "&appraiseContent=" + content + "&mId=" + '${item.id}',type: 'post',dataType: 'text',success: function(json) {var data = (eval('(' + json + ')')).message;var appraise = (eval('(' + json + ')')).appraise;appraiseTime = appraise.appraiseTime;objId = appraise.appraiseId;var levelObj = "";var levelTemp = appraise.appraiseLevel;if (levelTemp == '1')levelObj = "差";else if(levelTemp == '2')levelObj = "一般";else if (levelTemp == '3')levelObj = "好";else levelObj = "很好";var userId = appraise.userId;userName = appraise.userName;if (data == 'success') {//alert("回複成功");$("#mainReplayDiv").hide();var htmlObj = "<input type='hidden' name='mainInput' value='" + objId + "'>" + "<li id='" + objId + "'>" + "<div style='float:left'><a><img src='/educms/images/avatar.php'></a></div>" + "<div>" + "<div style='min_height:60px; margin:0px 0px 15px 65px;'>" + "<div><font style='font-weight:bold;' color='#458B00'>" + userName + "</font>" + "  <font sytle='font-weight:bold;'>看過" + "</font> <font color='#ef5b9c' style='font-weight:bold;'>" + levelObj + "</font><br>" + content + "</div>" + "<div>" + "<font color='#32CD32'>" + appraiseTime + "</font>" + /* "<img src='/educms/images/gotop.gif' onclick='addCount(\"" + objId + "\", \"agree\")'>" + "<label id='agreeCount" + objId + "'>[0]</label>" + "<img src='/educms/images/gobot.gif' onclick='addCount(\"" + objId + "\", \"against\")'>" + "<label id='againstCount" + objId + "'>[0]</label>" +  */"<span id='span_agree" + objId + "'>" +"<span id='main_span_agree" + objId + "'>" + "<a style='text-decoration: none; background:url(/educms/images/gotop.bmp)' onclick='addCount(\"" + objId + "\", \"agree\")'>" + "           " + "</a>" + "</span>" + "<span id='agreeCount" + objId + "'>[<b>0</b>]</span>" + "</span>" + "<span id='span_against" + objId + "'>" +"<span id='main_span_against" + objId + "'>" + "<a style='text-decoration: none; background:url(/educms/images/gobot.bmp)' onclick='addCount(\"" + objId + "\", \"against\")'>" + "           " + "</a>" + "</span>" + "<span id='againstCount" + objId + "'>[<b>0</b>]</span>" + "</span>" + " <img src='/educms/images/replay2_image.bmp' onclick='replayChild(\"" + objId + "\", \"1\", \"" + userId + "\")'>" +"</div>" + "</div>" + "<div style='margin:0px 0px 15px 65px;'>" + "<div id='childReplayDiv" + objId + "' style='display: none;'>" + "<form id='childReplayForm" + objId + "' action='/educms/appraiseController/saveAppraise.do' method='post'>" +"<input id='childItemId" + objId + "' name='mId' type='hidden' value='" + '${item.id}' + "'>" + "<input id='appraiseParentId" + objId + "' name='appraiseParentId' type='hidden' value=''>" + "<textarea id='childAppraiseContent" + objId + "' name='appraiseContent' style='width:90%;'></textarea>" + "<br>" + "<div align='right' style='margin: 0px 70px 0px 0px'>" + "<input type='submit' value='提交'>" + "</div>" + "</form>" + "</div>" +"<div id='child_div" + objId+ "'>" + "<div style='height:1px;'> </div>" + "</div>" + "</div>" + "</div>" + "</li>";//以下為動態增加評論記錄if(typeof($("#mainDiv").attr("title")) == 'undefined') {$("#main_div").append("<ol id='mainDiv'>" + htmlObj + "</ol>");} else $("#mainDiv").append(htmlObj);} else alert("回複失敗");}});}return false;});//序列化子評論表單$("input[name='mainInput']").each(function(i) {var tempChildId = $(this).val();//alert(tempChildId);$("#childItemId" + tempChildId).val('${item.id}');$("#childReplayForm" + tempChildId).submit(function() {content = $("#childAppraiseContent" + tempChildId).val();if (content == '') {alert("評論不可為空");return false;} else {$.ajax({type: 'post',url:'${pageContext.request.contextPath}/appraiseController/saveAppraise.do',data:$("#childReplayForm" + tempChildId).serialize(),dataType: 'text',success: function(json) {var data = (eval('(' + json + ')')).message;var appraise = (eval('(' + json + ')')).appraise;appraiseTime = appraise.appraiseTime;objId = appraise.appraiseId;userName = appraise.userName;var userId = appraise.userId;var parentId = $.trim($("#appraiseParentId" + appraise.appraiseParentId).val());$("#childReplayDiv" + tempChildId).hide();if (data == 'success') {var htmlObj = "<li>" + "<div style='float:left'><a><img src='/educms/images/avatar.php'></a></div>" + "<div style=' height:60px; min_height:60px; margin:0px 30px 0px 65px;'>" + "<div><font style='font-weight:bold;' color='#458B00'>" + userName + "</font>" + "  " + content + "</div>" + "<div>" + "<font color='#32CD32'>" + appraiseTime + "</font>" + /* "<img src='/educms/images/gotop.gif' onclick='addCount(\"" + objId + "\", \"agree\")'>" + "<label id='agreeCount" + objId + "'>[0]</label>" + "<img src='/educms/images/gobot.gif' onclick='addCount(\"" + objId + "\", \"against\")'>" + "<label id='againstCount" + objId + "'>[0]</label>" +  */"<span id='span_agree" + objId + "'>" +"<span id='main_span_agree" + objId + "'>" + "<a style='text-decoration: none; background:url(/educms/images/gotop.bmp)' onclick='addCount(\"" + objId + "\", \"agree\")'>" + "           " + "</a>" + "</span>" + "<span id='agreeCount" + objId + "'>[<b>0</b>]</span>" + "</span>" + "<span id='span_against" + objId + "'>" +"<span id='main_span_against" + objId + "'>" + "<a style='text-decoration: none; background:url(/educms/images/gobot.bmp)' onclick='addCount(\"" + objId + "\", \"against\")'>" + "           " + "</a>" + "</span>" + "<span id='againstCount" + objId + "'>[<b>0</b>]</span>" + "</span>" + " <img src='/educms/images/replay2_image.bmp' onclick='replayChild(\"" + parentId + "\", \"" + userName + "\", \"" + userId + "\")'>" +"</div>" + "</div>" + "</li>";if(typeof($("#childDiv" + parentId).attr("title")) == 'undefined') {$("#child_div" + parentId).append("<div style='height:1px;'> </div><ol id='childDiv" + parentId + "'>" + htmlObj + "</ol>");} else $("#childDiv" + parentId).append(htmlObj);} else alert("回複失敗");}});}return false;});});});

<tr><td><div id="appraise_modal" style="display:none"><div><input type="button" value="評論" id="mainAppraise"></div><div id="mainReplayDiv" style="display: none;"><font color="red">*</font>  你覺得該資源:<input type="radio" name="appraiseLevel" id="great" value="4">很好   <input type="radio" name="appraiseLevel" id="good" value="3">好   <input type="radio" name="appraiseLevel" id="ordinary" value="2">一般   <input type="radio" name="appraiseLevel" id="bad" value="1">差<form:form action="${pageContext.request.contextPath}/appraiseController/saveAppraise.do" modelAttribute="appraise" id="mainReplayForm" ><form:hidden path="mId" id="itemId"/><form:hidden path="appraiseLevel" id="appraiseLevel"/><form:textarea path="appraiseContent" id="appraiseContent" cssStyle="width: 90%"/><br><div align="right" style="margin: 0px 70px 0px 0px"><input type="submit" value="提交"/></div></form:form></div><div id="main_div"><c:if test="${not empty appraiseList }"><ol id="mainDiv"><c:forEach items="${appraiseList }" var="mainAppraise" varStatus="status"><input type="hidden" name="mainInput" value="${mainAppraise.appraiseId }"><li id="${mainAppraise.appraiseId }"><div style="float:left;"><a><img src="${pageContext.request.contextPath}/images/avatar.php"></a></div><div ><div style="min_height:60px; margin:0px 0px 15px 65px;"><div><font style="font-weight:bold;" color="#458B00">${mainAppraise.userName }</font>  <font style="font-weight:bold;">看過</font> <font color="#ef5b9c" style="font-weight:bold;"><c:if test="${mainAppraise.appraiseLevel == 1 }">差</c:if><c:if test="${mainAppraise.appraiseLevel == 2 }">一般</c:if><c:if test="${mainAppraise.appraiseLevel == 3 }">好</c:if><c:if test="${mainAppraise.appraiseLevel == 4 }">很好</c:if></font><br>${mainAppraise.appraiseContent}</div><div><font color="#32CD32">${mainAppraise.appraiseTime}</font><span id="span_agree${mainAppraise.appraiseId }"><span id="main_span_agree${mainAppraise.appraiseId }" ><a style="text-decoration: none; background:url(${pageContext.request.contextPath}/images/gotop.bmp)" onclick="addCount('${mainAppraise.appraiseId}', 'agree')">          </a></span><span id="agreeCount${mainAppraise.appraiseId }">[<b>${mainAppraise.agreeCount }</b>]</span></span><%-- <a id="a_img${mainAppraise.appraiseId }"><img src="${pageContext.request.contextPath}/images/gotop.gif" onclick="addCount('${mainAppraise.appraiseId}', 'agree')"><label id="agreeCount${mainAppraise.appraiseId }">[${mainAppraise.agreeCount }]</label> </a> --%><%-- <a id="aa_img${mainAppraise.appraiseId }"><img src="${pageContext.request.contextPath}/images/gobot.gif" onclick="addCount('${mainAppraise.appraiseId}', 'against')"><label id="againstCount${mainAppraise.appraiseId }">[${mainAppraise.againstCount }]</label></a> --%><span id="span_against${mainAppraise.appraiseId }"><span id="main_span_against${mainAppraise.appraiseId }"><a style="text-decoration: none; background:url(${pageContext.request.contextPath}/images/gobot.bmp)" onclick="addCount('${mainAppraise.appraiseId}', 'against')">          </a></span><span id="againstCount${mainAppraise.appraiseId }">[<b>${mainAppraise.againstCount }</b>]</span></span><img src="${pageContext.request.contextPath}/images/replay2_image.bmp" onclick="replayChild('${mainAppraise.appraiseId}', '1', '${mainAppraise.userId }')"></div></div><div style="margin:0px 0px 15px 65px;"><div id="childReplayDiv${mainAppraise.appraiseId }" style="display: none;"><form:form action="${pageContext.request.contextPath}/appraiseController/saveAppraise.do" modelAttribute="appraise" id="childReplayForm${mainAppraise.appraiseId }" ><form:hidden path="mId" id="childItemId${mainAppraise.appraiseId }"/><form:hidden path="appraiseParentId" id="appraiseParentId${mainAppraise.appraiseId }" /><form:textarea path="appraiseContent" id="childAppraiseContent${mainAppraise.appraiseId }" cssStyle="width:90%;"/><br><div align="right" style="margin: 0px 70px 0px 0px"><input type="submit" value="提交"/></div></form:form></div><div id="child_div${mainAppraise.appraiseId }"><div style="height:1px;"> </div><c:if test="${not empty mainAppraise.appraiseChildList }"><!-- 回複列表不為空白 --><ol id="childDiv${mainAppraise.appraiseId }"><c:forEach items="${mainAppraise.appraiseChildList }" var="childAppraise"><li><div style="float:left;"><a><img src="${pageContext.request.contextPath}/images/avatar.php"></a></div><div style="min-height:60px; margin:0px 30px 0px 65px;"><div><font style="font-weight: bold;" color="#458B00">${childAppraise.userName }</font>   ${childAppraise.appraiseContent}</div><div><font color="#32CD32">${childAppraise.appraiseTime}</font><span id="span_agree${childAppraise.appraiseId }"><span id="main_span_agree${childAppraise.appraiseId }"><a style="text-decoration: none; background:url(${pageContext.request.contextPath}/images/gotop.bmp)" onclick="addCount('${childAppraise.appraiseId}', 'agree')">          </a></span><span id="agreeCount${childAppraise.appraiseId }">[<b>${childAppraise.agreeCount }</b>]</span></span><span id="span_against${childAppraise.appraiseId }"><span id="main_span_against${childAppraise.appraiseId }"><a style="text-decoration: none; background:url(${pageContext.request.contextPath}/images/gobot.bmp)" onclick="addCount('${childAppraise.appraiseId}', 'against')">          </a></span><span id="againstCount${childAppraise.appraiseId }">[<b>${childAppraise.againstCount }</b>]</span></span><%-- <img src="${pageContext.request.contextPath}/images/gotop.gif" onclick="addCount('${childAppraise.appraiseId}', 'agree')"><label id="agreeCount${childAppraise.appraiseId }">[${childAppraise.agreeCount }]</label> <img src="${pageContext.request.contextPath}/images/gobot.gif" onclick="addCount('${childAppraise.appraiseId}', 'against')"><label id="againstCount${childAppraise.appraiseId }">[${childAppraise.againstCount }]</label> --%><img src="${pageContext.request.contextPath}/images/replay2_image.bmp" onclick="replayChild('${mainAppraise.appraiseId}', '${childAppraise.userName }', '${childAppraise.userId }')"></div></div></li></c:forEach></ol></c:if></div></div></div></li></c:forEach></ol></c:if></div></div></td></tr>

效果如下：