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>
?
總結
以上是生活随笔為你收集整理的DWZ的Ajax表单的全部內容，希望文章能夠幫你解決所遇到的問題。
