JQuery异步提交表单(不使用jQuery.form插件)

阅读更多

不用jQuery.form插件也一样能很方便地提交表单，只需要在页面加载时定义表单提交时的动作就可以。

引入jQuery包是必须的；然后在$(document).ready(function() {})里定义表单提交动作。

例(以下代码为项目中的一小部分)：

$(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 = "" + 
								"
" + 
									"
" + 
									"
" + 
										"
" + 
											"
" + userName + "" + 
												"看过" + 
												"" + levelObj + "
" + content + 
											"
" + 
											"
" + 
												"" + appraiseTime + "" + 
												/* "" + 
												"[0]" + 
												"" + 
												"[0]" +  */
												"" +
													"" + 
														"" + 
															"" + 
														"" + 
													"" + 
													"[0]" + 
												"" + 
												"" +
													"" + 
														"" + 
															"" + 
														"" + 
													"" + 
													"[0]" + 
												"" + 
												"" +
											"
" + 
										"
" + 
										"
" + 
											"
" + 
												"
" +
													"" + 
													"" + 
													"" + 
													"
" + 
													"
" + 
														"" + 
													"
" + 
												"
" + 
											"
" +
											"
" + 
												"
" + 
											"
" + 
										"
" + 
									"
" + 
								"
";
							//以下为动态增加评论记录
							if(typeof($("#mainDiv").attr("title")) == 'undefined') {
								$("#main_div").append("
" + htmlObj + "
");
							} 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 = "
" + 
								"
" + 
								"
" + 
									"
" + userName + "" + 
										"" + content + "
" + 
									"
" + 
										"" + appraiseTime + "" + 
										/* "" + 
										"[0]" + 
										"" + 
										"[0]" +  */
										"" +
											"" + 
												"" + 
													"" + 
												"" + 
											"" + 
											"[0]" + 
										"" + 
										"" +
											"" + 
												"" + 
													"" + 
												"" + 
											"" + 
											"[0]" + 
										"" + 
										"" +
									"
" + 
								"
" + 
							"
";
							if(typeof($("#childDiv" + parentId).attr("title")) == 'undefined') {
								$("#child_div" + parentId).append("
" + htmlObj + "
");
							} else 
								$("#childDiv" + parentId).append(htmlObj);
						} else 
							alert("回复失败");
					}
				});
			}
			return false;
		});
	});
});

						
							

								

									
								
								

									*你觉得该资源:
									很好
									好
									一般
									差
									
										
										
										
										

										

											
										
									
								
								

								
									

										
											
											

												

													
														
													
												
												

													

														

															${mainAppraise.userName }
															看过
															
																差
																一般
																好
																很好
															
															
${mainAppraise.appraiseContent}
														
														

															${mainAppraise.appraiseTime}
															
																
																	
																		
																	
																
																[${mainAppraise.agreeCount }]
															
															<%-- 
																
																[${mainAppraise.agreeCount }] 
															 --%>
															<%-- 
																
																[${mainAppraise.againstCount }]
															 --%>
															
																
																	
																		
																	
																
																[${mainAppraise.againstCount }]
															
															
														
													
													

														

															
																
																
																
																

																

																	
																
															
														
														

															

														
															

																
																	

																		

																			
																				
																			
																		
																		

																			

																				${childAppraise.userName }
																				 ${childAppraise.appraiseContent}
																			
																			

																				${childAppraise.appraiseTime}
																				
																					
																						
																							
																						
																					
																					[${childAppraise.agreeCount }]
																				
																				
																					
																						
																							
																						
																					
																					[${childAppraise.againstCount }]
																				
																				<%-- 
																				[${childAppraise.agreeCount }] 
																				
																				[${childAppraise.againstCount }] --%>
																				
																			
																		
																	
																
															
														
														
													
												
											
										
									
								
								
							
						
					

效果如下：