DWZ框架表单提交响应

DWZ表单提交dwz.ajax.js

1、Ajax 表单提交后自动调用默认回调函数, 操作成功或失败提示.

Form标签上增加οnsubmit="returnvalidateCallback(this);

2、 Ajax 表单提交后如果需要重新加载某个navTab或关闭dialog，可以使用dwz.ajax.js中事先定义的方法navTabAjaxDone/dialogAjaxDone

注意：如果表单在navTab页面上使用navTabAjaxDone，表单在dialog页面上使用dialogAjaxDone

Form标签上增加οnsubmit="returnvalidateCallback(this,navTabAjaxDone)"

或οnsubmit="returnvalidateCallback(this,dialogAjaxDone)"

3、Ajax 表单提交后如果需要做一些其它处理也可以自定义一个回调函数xxxAjaxDone。例如下面表单提交成功后关闭当前navTab, 或者重新载入某个tab.

Form标签上增加οnsubmit="returnvalidateCallback(this,xxxAjaxDone)"

服务器端响应

Ajax表单提交后服务器端需要返回以下json代码：

{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}

以下是dwz.ajax.js中定义的navTabAjaxDone和dialogAjaxDone代码片段：

/**

* navTabAjaxDone是DWZ框架中预定义的表单提交回调函数．

* 服务器转回navTabId可以把那个navTab标记为reloadFlag=1, 下次切换到那个navTab时会重新载入内容.

* callbackType如果是closeCurrent就会关闭当前tab

* 只有callbackType="forward"时需要forwardUrl值

* navTabAjaxDone这个回调函数基本可以通用了，如果还有特殊需要也可以自定义回调函数.

* 如果表单提交只提示操作是否成功, 就可以不指定回调函数. 框架会默认调用DWZ.ajaxDone()

* <form action="/user.do?method=save" οnsubmit="return validateCallback(this, navTabAjaxDone)">

*

* form提交后返回json数据结构statusCode=DWZ.statusCode.ok表示操作成功, 做页面跳转等操作. statusCode=DWZ.statusCode.error表示操作失败, 提示错误原因.

* statusCode=DWZ.statusCode.timeout表示session超时，下次点击时跳转到DWZ.loginUrl

* {"statusCode":"200", "message":"操作成功", "navTabId":"navNewsLi", "forwardUrl":"", "callbackType":"closeCurrent"}

* {"statusCode":"300", "message":"操作失败"}

* {"statusCode":"301", "message":"会话超时"}

*

*/

function navTabAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){ //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的
navTab.reloadFlag(json.navTabId);
} else { //重新载入当前navTab页面
navTabPageBreak();
}
 
if ("closeCurrent" == json.callbackType) {
setTimeout(function(){navTab.closeCurrentTab();}, 100);
} else if ("forward" == json.callbackType) {
navTab.reload(json.forwardUrl);
}
}
}

/**

* dialog上的表单提交回调函数

* 服务器转回navTabId，可以重新载入指定的navTab. statusCode=DWZ.statusCode.ok表示操作成功, 自动关闭当前dialog

*

* form提交后返回json数据结构,json格式和navTabAjaxDone一致

*/

function dialogAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){
navTab.reload(json.forwardUrl, {}, json.navTabId);
}
$.pdialog.closeCurrent();
}
}

示例:

<form method="post" action="url" οnsubmit="return validateCallback(this);">
<div layoutH="56">
<p>
<label>E-Mail：</label>
<input name="email" type="text" size="30" />
</p>
<p>
<label>客户名称：</label>
<input name="name" type="text" size="30" />
</p>
</div>
<div>
<ul>
<li>
<div><div><button type="submit">保存</button></div></div>
</li>
<li>
<div><div><button type="Button">取消</button></div></div>
</li>
</ul>
</div>
</form>

文件上传表单提交

因为Ajax不支持enctype="multipart/form-data" 所以用隐藏iframe来处理无刷新表单提交.

<form method="post" action="url" enctype="multipart/form-data" οnsubmit="returniframeCallback(this);">

或

<form method="post" action="url" enctype="multipart/form-data" οnsubmit="returniframeCallback(this, [navTabAjaxDone/dialogAjaxDone]);">

服务器端响应

DWZ-v1.2版本开始服务器返回和validateCallback格式保持一致：

 
{
"statusCode":"200",
"message":"操作成功",
"navTabId":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}