DWZ富客戶端框架-Ajax表單

Ajax表單

Ajax表單相關(guān)的操作封裝在dwz.ajax.js中。表單查詢、分頁、表單提交js方法都已經(jīng)封裝在里面了。開發(fā)人員自己不需寫js，按標(biāo)準(zhǔn)使用就可以了。

表單查詢

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" /><!--【可選】查詢排序-->
    <!--【可選】其它查詢條件，業(yè)務(wù)有關(guān)，有什么查詢條件就加什么參數(shù)-->
    <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)">

修改每頁顯示行數(shù)

<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彈出層上的查詢, 會重新載入當(dāng)前navTab
 * @param{Object} form
 */
function navTabSearch(form){
    navTab.reload(form.action, $(form).serializeArray());
    return false;
}
/**
 * 處理dialog彈出層上的查詢, 會重新載入當(dāng)前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表單提交給服務(wù)器
   
2. 服務(wù)器返回一個固定格式j(luò)son結(jié)構(gòu)
   
3. js會調(diào)函數(shù)根據(jù)這個json數(shù)據(jù)做相應(yīng)的處理
   

注意：
DWZ框架默認(rèn)的ajax表單提交都是返回json數(shù)據(jù)，告訴客戶端操作是否成功，成功或失敗提示信息，以及成功后的處理方式（刷新某個navTab或關(guān)閉某個navTab或navTab頁面跳轉(zhuǎn)）。
表單提交后服務(wù)器操作失敗了，客戶端接收statusCode和message后給出錯誤提示，表單頁面是不動的。這樣可以方便用戶看到出錯原因后直接修改表單數(shù)據(jù)再次提交，而不用重填整個表單數(shù)據(jù)。當(dāng)然如果你還是喜歡表單提交后直接載入html頁面也是沒有問題的，參照dwz.ajax.js自己擴展一下也是沒問題的。
DWZ 表單提交dwz.ajax.js

• Ajax 表單提交后自動調(diào)用默認(rèn)回調(diào)函數(shù), 操作成功或失敗提示.
  

Form標(biāo)簽上增加onsubmit="return validateCallback(this);

• Ajax 表單提交后如果需要重新加載某個navTab或關(guān)閉dialog，可以使用dwz.ajax.js中事先定義的方法navTabAjaxDone/dialogAjaxDone
  

注意：如果表單在navTab頁面上使用navTabAjaxDone，表單在dialog頁面上使用dialogAjaxDone
Form標(biāo)簽上增加onsubmit="return validateCallback(this, navTabAjaxDone)"
或onsubmit="return validateCallback(this, dialogAjaxDone)"

•  Ajax 表單提交后如果需要做一些其它處理也可以自定義一個回調(diào)函數(shù)xxxAjaxDone。例如下面表單提交成功后關(guān)閉當(dāng)前navTab, 或者重新載入某個tab.
  

Form標(biāo)簽上增加onsubmit="return validateCallback(this, xxxAjaxDone)"

服務(wù)器端響應(yīng)

Ajax表單提交后服務(wù)器端需要返回以下json代碼：

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

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

/**
 * navTabAjaxDone是DWZ框架中預(yù)定義的表單提交回調(diào)函數(shù)．
 * 服務(wù)器轉(zhuǎn)回navTabId可以把那個navTab標(biāo)記為reloadFlag=1, 下次切換到那個navTab時會重新載入內(nèi)容.
 * callbackType如果是closeCurrent就會關(guān)閉當(dāng)前tab
 * 只有callbackType="forward"時需要forwardUrl值
 * navTabAjaxDone這個回調(diào)函數(shù)基本可以通用了，如果還有特殊需要也可以自定義回調(diào)函數(shù).
 * 如果表單提交只提示操作是否成功, 就可以不指定回調(diào)函數(shù). 框架會默認(rèn)調(diào)用DWZ.ajaxDone()
 * <form action="/user.do?method=save" onsubmit="return validateCallback(this,navTabAjaxDone)">
 *
 * form提交后返回json數(shù)據(jù)結(jié)構(gòu)statusCode=DWZ.statusCode.ok表示操作成功, 做頁面跳轉(zhuǎn)等操作. statusCode=DWZ.statusCode.error表示操作失敗, 提示錯誤原因.
 * statusCode=DWZ.statusCode.timeout表示session超時，下次點擊時跳轉(zhuǎn)到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頁面標(biāo)記為需要“重新載入”。注意navTabId不能是當(dāng)前navTab頁面的
           navTab.reloadFlag(json.navTabId);
       } else { //重新載入當(dāng)前navTab頁面
           navTabPageBreak();
       }
      
       if ("closeCurrent" ==json.callbackType) {
           setTimeout(function(){navTab.closeCurrentTab();}, 100);
       } else if ("forward" ==json.callbackType) {
           navTab.reload(json.forwardUrl);
       }
    }
}
 
/**
 * dialog上的表單提交回調(diào)函數(shù)
 * 服務(wù)器轉(zhuǎn)回navTabId，可以重新載入指定的navTab. statusCode=DWZ.statusCode.ok表示操作成功, 自動關(guān)閉當(dāng)前dialog
 *
 * form提交后返回json數(shù)據(jù)結(jié)構(gòu),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>