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>

效果如下：