DWZ控件中Ajax提交form表单

1.表单样式



2.表单代码

<div class="pageContent">
<form:form id="borrowFormName" method="post" action="${ctx}/borrowLog/save" enctype="multipart/form-data"  modelAttribute="borrowLog" class="pageForm required-validate" onsubmit="return validateCallback(this, dialogAjaxDone_form)">
<input type="hidden" name="archiveId" value="${archiveId}" />
<div class="pageFormContent" layoutH="58">
<div class="unit">
<label>借阅部门：</label>
   
<input type="text" name="org" size="40" minlength="2" maxlength="20" class="commonName required" value=""/>
</div>
<div class="divider"></div>

<div class="unit">
<label>借  阅  人：</label>
<input type="text" id="employeeName" name="employeeName" size="40" minlength="2" maxlength="20" class="commonName required" value=""/>
</div>
<div class="divider"></div>

<!-- <div class="unit">
<label>借阅时间：</label>
<input type="text" id="d4311" name="beginTime" size="14" class="required" onClick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,maxDate:'#F{$dp.$D(\'d4311\')}'})" value="{:date('yyyy-MM-dd',time())}" readonly="readonly"/>
</div>
<div class="divider"></div> -->
<div class="unit">
<label>借阅用途：</label>
<input type="text" id="purpose" name="purpose" size="40" minlength="2" maxlength="10" class="commonName required" value=""/>
</div>
<div class="divider"></div>
</div>
<div class="formBar">
<ul>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li> <!-- onclick="return checkCert();" -->
<li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li>
</ul>
</div>
</form:form>

</div>

3.表单提交js

<script type="text/javascript">

function validateCallback(form, callback) {  

    var $form = $(form);  

    //验证表单如果有非法字段 返回  

    if (!$form.valid()) {  

        return false;  

    }  

    //Ajax向后台提交数据  

    $.ajax({  

        type: form.method || 'POST',  

  url:$form.attr("action"),  

        //获取表单的内容数据  

        data:$form.serializeArray(),  

        dataType:"json",  

        cache: false,  

        //执行回调函数  

        success: callback || DWZ.ajaxDone,  

        error: DWZ.ajaxError  

    });  

   //保证不会通过普通表单提交  

   return false;  

}  

//自定义函数

function dialogAjaxDone_form(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){ 
var message = json.message;
var messageInfo = message.split(",")[0];
var id = message.split(",")[1];
alertMsg.info(messageInfo);
 
window.location.replace("${ctx}/borrowLog/download/"+id);
}

}

</script>