DWZ富客户端框架-Ajax表单

Ajax表单

Ajax表单相关的操作封装在dwz.ajax.js中。表单查询、分页、表单提交js方法都已经封装在里面了。开发人员自己不需写js，按标准使用就可以了。

表单查询

DWZ中定义表单查询和分页都是用这个pagerForm来临时存查询条件。所以需要在查询页面上放下面的form

<formid="pagerForm" action="xxx" method="post">
    <input type="hidden" name="pageNum"value="1" /><!--【必须】value=1可以写死-->
    <input type="hidden" name="numPerPage"value="20" /><!--【可选】每页显示多少条-->
    <input type="hidden" name="orderField"value="xxx" /><!--【可选】查询排序-->
    <!--【可选】其它查询条件，业务有关，有什么查询条件就加什么参数-->
    <input type="hidden" name="status" value="active" />
</form>

ajax表单查询

<form action="xxx" method="post" onsubmit="returnnavTabSearch(this)">

或

<form action="xxx" method="post" onsubmit="returndialogSearch(this)">

修改每页显示行数

<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="200">200</option>
</select>
 
/**
 * 处理navTab弹出层上的查询, 会重新载入当前navTab
 * @param{Object} form
 */
function navTabSearch(form){
    navTab.reload(form.action, $(form).serializeArray());
    return false;
}
/**
 * 处理dialog弹出层上的查询, 会重新载入当前dialog
 * @param{Object} form
 */
function dialogSearch(form){
    $.pdialog.reload(form.action, $(form).serializeArray());
    return false;
}
 
/**
 * 处理navTab中的分页和排序
 * @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}
 */
function navTabPageBreak(args){
    var form = _getPagerForm(navTab.getCurrentPanel(), args);
    if (form) navTab.reload(form.action, $(form).serializeArray());
}
/**
 * 处理dialog中的分页和排序
 * @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}
 */
function dialogPageBreak(args){
    var form = _getPagerForm($.pdialog.getCurrent(), args);
    if (form) $.pdialog.reload(form.action, $(form).serializeArray());
}

ajax表单查询完整示例：

<div class="pageHeader">
    <form action="/render.do?method=search"method="post" onsubmit="returnnavTabSearch(this)">
    <input type="hidden" name="resourceStatus" value="${param.resourceStatus}"/>
    <input type="hidden" name="pageNum" value="1" />
    <input type="hidden" name="orderField" value="${param.orderField}"/>
    <div class="searchBar">
       <div class="searchContent">
           <select name="resourceType">
              <option value="">全部栏目</option>
              <c:forEach var="item" items="${model.resourceTypes}">
              <option value="${item.id}"${param.resourceType eq item.id?"selected":"" }>${item.name}</option>
              </c:forEach>
           </select>
           <input name="keywords"type="text" size="25" value="${param.keywords}"/>
       </div>
       <div class="subBar">
           <ul>
              <li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
           </ul>
       </div>
    </div>
    </form>
</div>

普通Ajax表单提交

DWZ框架Ajax无刷新表单提交处理流程是：

1. ajax表单提交给服务器
   
2. 服务器返回一个固定格式json结构
   
3. js会调函数根据这个json数据做相应的处理
   

注意：
DWZ框架默认的ajax表单提交都是返回json数据，告诉客户端操作是否成功，成功或失败提示信息，以及成功后的处理方式（刷新某个navTab或关闭某个navTab或navTab页面跳转）。
表单提交后服务器操作失败了，客户端接收statusCode和message后给出错误提示，表单页面是不动的。这样可以方便用户看到出错原因后直接修改表单数据再次提交，而不用重填整个表单数据。当然如果你还是喜欢表单提交后直接载入html页面也是没有问题的，参照dwz.ajax.js自己扩展一下也是没问题的。
DWZ 表单提交dwz.ajax.js

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

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

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

注意：如果表单在navTab页面上使用navTabAjaxDone，表单在dialog页面上使用dialogAjaxDone
Form标签上增加onsubmit="return validateCallback(this, navTabAjaxDone)"
或onsubmit="return validateCallback(this, dialogAjaxDone)"

•  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 action="/user.do?method=save" onsubmit="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" class="pageFormrequired-validate" onsubmit="returnvalidateCallback(this);">
<div class="pageFormContent"layoutH="56">
    <p>
       <label>E-Mail：</label>
       <input class="required email"name="email" type="text" size="30" />
    </p>
    <p>
       <label>客户名称：</label>
       <input class="required"name="name" type="text" size="30" />
    </p>
</div>
<div class="formBar">
    <ul>
       <li>
           <div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div>
       </li>
       <li>
           <div class="button"><div class="buttonContent"><button type="Button" class="close">取消</button></div></div>
       </li>
    </ul>
</div>
</form>