2. 服務器返回一個固定格式json結構
3. js會調函數根據這個json數據做相應的處理
注意：
DWZ框架默認的ajax表單提交都是返回json數據，告訴客戶端操作是否成功，成功或失敗提示信息，以及成功後的處理方式（刷新某個navTab或關閉某個navTab或navTab頁面跳轉）。
表單提交後服務器操作失敗了，客戶端接收statusCode和message後給出錯誤提示，表單頁面是不動的。這樣可以方便用戶看到出錯原因後直接修改表單數據再次提交，而不用重填整個表單數據。當然如果你還是喜歡錶單提交後直接載入html頁面也是沒有問題的，參照dwz.ajax.js自己擴展一下也是沒問題的。
· Ajax 表單提交後自動調用默認回調函數, 操作成功或失敗提示.
Form標籤上增加 οnsubmit="return validateCallback(this);
· Ajax 表單提交後如果需要重新加載某個navTab或關閉dialog，可以使用dwz.ajax.js中事先定義的方法navTabAjaxDone/dialogAjaxDone
注意：如果表單在navTab頁面上使用navTabAjaxDone，表單在dialog頁面上使用dialogAjaxDone
Form標籤上增加οnsubmit="return validateCallback(this, navTabAjaxDone)"
或οnsubmit="return validateCallback(this, dialogAjaxDone)"
· Ajax 表單提交後如果需要做一些其它處理也可以自定義一個回調函數xxxAjaxDone。例如下面表單提交成功後關閉當前navTab, 或者重新載入某個tab.
Form標籤上增加οnsubmit="return validateCallback(this, xxxAjaxDone)"
{
"statusCode":"200",
"message":"操作成功",
"navTabId":"", //服務器轉回navTabId可以把那個navTab標記爲reloadFlag=1,
下次切換到那個navTab時會重新載入內容
"rel":"",
"callbackType":"closeCurrent", //callbackType如果是closeCurrent就會關閉當前tab
// 只有callbackType="forward"時需要forwardUrl值
"forwardUrl":""
}
如果表單提交只提示操作是否成功, 就可以不指定回調函數. 框架會默認調用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":"會話超時"}
表單提交使用：
目標：用戶信息添加---->進入添加頁面-->提交表單-->顯示成功提示並關閉當前添加頁面同時回到原來頁面並重新載入數據
1、後臺index.html中：
設置一個客戶信息管理鏈接：
<li><a href="customer_main.action?pager.currentPage=1" target="navTab" rel="info" >客戶信息管理</a></li>
<li><a class="add" href="<%=basePath%>/admin/customer_addInput.jsp" target="navTab"><span>添加</span></a></li>
3、表單提交主要在添加頁面中，即customer_addInput.jsp中設置：<form method="post" action="<%=basePath%>/admin/customer_add.action" class="pageForm required-validate" οnsubmit="return validateCallback(this, navTabAjaxDone);"> <div class="pageFormContent" layoutH="56"> <p> <label>客戶暱稱：</label> <input id="cus_id" type="text" name="customer.cus_id" size="30" class="required"/> </p> <p> <label>客戶名：</label> <input id="cus_name" type="text" name="customer.cus_name" size="30" class="required"/> </p> <p> <label>郵箱：</label> <input id="cus_email" type="text" name="customer.cus_email" size="30" class="required email"/> </p> <p> <label>客戶類型：</label> <select name="customer.cus_type" class="required combox"> <option value="">請選擇</option> <option value="1">管理員</option> <option value="2" selected>客戶</option> </select> </p> </div> <div class="formBar"> <ul> <!--<li><a class="buttonActive" href="javascript:;"><span>保存</span></a></li>--> <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>
關鍵設置爲： οnsubmit="return validateCallback(this, navTabAjaxDone);4、提交成功後轉到的頁面效果：
{ "statusCode":"200", "message":"\u64cd\u4f5c\u6210\u529f",//操作成功 "navTabId":"info",//客戶信息管理鏈接中的rel="info" "rel":"", "callbackType":"closeCurrent",//關閉當前頁面 "forwardUrl":"", "confirmMsg":"" }
以上即爲成功後，顯示操作成功，關閉當前頁面，回到info中並刷新數據的效果