DWZ的Ajax表单

 Ajax表单

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

表单查询

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

<form id="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="return navTabSearch(this)">

或

<form action="xxx" method="post" onsubmit="return dialogSearch(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中的分页和排序

 * @param args {pageNum:"n", numPerPage:"n", orderField:"xxx"}

 */

function navTabPageBreak(args){

      var form = _getPagerForm(navTab.getCurrentPanel(), args);

      if (form) navTab.reload(form.action, $(form).serializeArray());

}

/**

 * 处理dialog中的分页和排序

 * @param args {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="return navTabSearch(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" ο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" class="pageForm required-validate" onsubmit="return validateCallback(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>