Jquery表单提交插件之ajaxForm

jQuery Form插件是一个优秀的Ajax表单插件，我们可以非常容易的使用它处理表单控件的值，清空和复位表单控件，附件上传，以及完成Ajax表单提交。下面详细描述ajaxForm插件的用法，

先下载：http://www.malsup.com/jquery/form/

两个主要的API：ajaxForm() ajaxSubmit()。

一、首先我们引入jquery库和jquery.form.js插件，由于作者是在easyui框架下开发的，所以还得引入相关JS

<!-- ajaxForm插件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-ajaxform-3.46.0/jquery.form.js"></script>
<!-- jquery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-1.8.2.min.js" charset="utf-8"></script>
<!-- easyui相关库 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-easyui-1.3.5/jquery.easyui.min.js" charset="utf-8"></script>

二、创建表单代码

<form id="addAndEditForm" method="post">
	<table class="tableForm datagrid-toolbar">
		<tr>
			<th>机构名称</th>
			<td>
				<input name="tid" type="hidden"/>
				<input name="insname" id="insname" class="easyui-validatebox" data-options="required:true"/>
			</td>
		</tr>
		<tr>
			<th>机构代码</th>
			<td>
				<input name="inscode" id="inscode" class="easyui-validatebox" />
			</td>
		</tr>
		<tr>
			<th>联系人</th>
			<td>
				<input name="linkman" id="linkman" class="easyui-validatebox" />
			</td>
		</tr>
		<tr>
			<th>联系电话</th>
			<td>
				<input name="linktel" id="linktel" class="easyui-validatebox" />
			</td>
		</tr>
		<tr>
			<th>备注</th>
			<td>
				<input name="remark" id="remark" class="easyui-validatebox"/>
			</td>
		</tr>
	</table>
</form>

表单中，要求输入结构名称、结构代码、联系人、联系电话、备注等信息，

三、调用提交方法

我们很方便的调用jquery.form插件，利用ajaxSubmit()使得整个表单的ajax提交过程变得非常的简单。

var addAndEditDialog = $('#addAndEditDialog').show().dialog({
	modal : true,
	buttons : [ {
		text : '确定',
		handler : function() {
			var isValid = $("#addAndEditForm").form('validate');
			if (isValid){//验证成功
				//ajaxForm表单提交
				var options = {  
					url : url,
				success : function(responseText, statusText)  { 
					addAndEditDialog.dialog('close');
						$('#datagrid').datagrid('reload');
					$.messager.show({
							msg : responseText.msg,
							title : '提示'
						});
				},
				error : function(XMLHttpRequest, textStatus, errorThrown)  {  
						$.messager.alert('错误', XMLHttpRequest.responseText);
					} ,
				resetForm : true,  
				dataType:  'json' 
			    };
				$("#addAndEditForm").ajaxSubmit(options);  
			} 
		}
	} ],
}).dialog('close');

其中options的属性，常用的介绍一下

target        指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
url           Ajax请求将要提交到该url，默认是表单的action属性值
type          指定提交表单数据的方法（method）：“GET”或“POST”。默认值：表单的method属性值（如果没有找到默认为“GET”）
dataType      返回的数据类型，可选：json、xml、script
clearForm     表示如果表单提交成功是否清除表单数据。默认值：null
resetForm     表示如果表单提交成功是否进行重置。默认值: null
iframe        如果设置，表示将使用iframe方式提交表单
beforeSerialize    数据序列化前：function($form,options){}
beforeSubmit  提交前：function(arr,$from,options){}
success       提交成功后：function(data,statusText){}
error         错误：function(data){alert(data.message);}