编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

DWZ框架表单提交响应

作者:佚名  发布日期:2013-11-08 21:06:28
  • 收藏本文    我要投稿
  • DWZ 表单提交dwz.ajax.js

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

     

    Form标签上增加 onsubmit="return validateCallback(this);

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

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

    Form标签上增加onsubmit="return validateCallback(this, navTabAjaxDone)"

    或onsubmit="return validateCallback(this, dialogAjaxDone)"

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

    Form标签上增加onsubmit="return validateCallback(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提交后返回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();
    }
    }

    示例:

     

    
    	


    文件上传表单提交

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

     

     

     

     

    服务器端响应

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

     

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


     

延伸阅读:

Tag标签:DWZ  
  • 专题推荐