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、scriptclearForm     表示如果表单提交成功是否清除表单数据。默认值：nullresetForm     表示如果表单提交成功是否进行重置。默认值: nulliframe        如果设置，表示将使用iframe方式提交表单beforeSerialize    数据序列化前：function($form,options){}beforeSubmit  提交前：function(arr,$from,options){}success       提交成功后：function(data,statusText){}error         错误：function(data){alert(data.message);}