【轉】表單提交及關閉當前頁面並刷新數據

在DWZ文檔中，對於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":"", //服務器轉回navTabId能夠把那個navTab標記爲reloadFlag=1, 下次切換到那個navTab時會從新載入內容     
        "rel":"",      
       "callbackType":"closeCurrent",  //callbackType若是是closeCurrent就會關閉當前tab  
                                    // 只有callbackType="forward"時須要forwardUrl值     
       "forwardUrl":""}

 若是表單提交只提示操做是否成功, 就能夠不指定回調函數. 框架會默認調用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":"會話超時"}

表單提交使用：
目標：用戶信息添加---->進入添加頁面-->提交表單-->顯示成功提示並關閉當前添加頁面同時回到原來頁面並從新載入數據
一、後臺index.html中：
設置一個客戶信息管理連接：
<li><a href="customer_main.action?pager.currentPage=1" target="navTab" rel="info" >客戶信息管理</a></li>

二、點擊「添加」進入客戶添加頁面：

 三、表單提交主要在添加頁面中，即customer_addInput.jsp中設置：

<form method="post" action="<%=basePath%>/admin/customer_add.action" class="pageForm required-validate" onsubmit="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>

關鍵設置爲： onsubmit="return validateCallback(this, navTabAjaxDone);

四、提交成功後轉到的頁面效果：

在最後進入的頁面中設置：

{
 "statusCode":"200",
 "message":"\u64cd\u4f5c\u6210\u529f",//操做成功
 "navTabId":"info",//客戶信息管理連接中的rel="info"
 "rel":"",
 "callbackType":"closeCurrent",//關閉當前頁面
 "forwardUrl":"",
 "confirmMsg":""
}
以上即爲成功後，顯示操做成功，關閉當前頁面，回到info中並刷新數據的效果