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);}