DWZ框架Ajax表單提交

普通Ajax表單提交方式

DWZ 表單提交dwz.ajax.js

Ajax 表單提交 後自動調用默認 回調函數, 操做成功或失敗提示.

Form標籤上增長 onsubmit="return validateCallBack(this); 

Ajax 表單 提交後若是須要作一些其它處理也能夠自定義一個回調函數. 例以下面表單提交成功後關閉當前navTab, 或者從新載入某個tab.  

Form標籤上增長  onsubmit="return validateCallBack(this,navTabAjaxDone )" 

navTabAjaxDone是DWZ框架中預約義的表單提交回調函數. 服務器轉回navTabId能夠把那個tab標記爲reloadFlag=1, 次下切換到那個tab時會從新載入內容. navTabId若是是closeCurrent就會關閉當前tab 

navTabAjaxDone這個回調函數基本能夠通用了， 若是還有特殊須要也能夠自定義回調函數. 若是表單提交只提示操做是否成 功, 就能夠不指定回調函數. 框架會默認調用ajaxDone()

 

{statusCode:200, message:"操做成功", navTabId:"closeCurrent"}

{statusCode:200, message:"操做成功", navTabId:"page1"}

 

{statusCode:300, message:"操做失敗", navTabId:""}

 

 

示例:

<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>

文件上傳表單提 交方式

 

由於Ajax不支持enctype="multipart/form-data" 因此用隱藏iframe來處理 無刷新表單提交.  

<form method="post" action="url" class="pageForm required-validate" enctype="multipart/form-data" onsubmit="return ifarmeCallback(this);">

或

<form method="post" action="url" class="pageForm required-validate" enctype="multipart/form-data" onsubmit="return ifarmeCallback(this, xxxCallback);">

 

服務器端須要返回

<script type="text/javascript">

      var statusCode="${statusCode}";

      var message="${message}";                        

      var navTabId="${navTabId}";

 

      var response = {statusCode:statusCode,

                  message:message,

                  navTabId:navTabId

            }

      if(window.parent.donecallback) window.parent.donecallback(response);

</script>

 

 

Java服務器端表單處理示例

public class UserAction extends BaseAction {

 

public ActionForward changePwd(ActionMapping mapping, BaseActionForm bForm,

            HttpServletRequest request, HttpServletResponse response)

            throws IOException, ServletException {

      UserForm form = (UserForm) bForm;

 

      if (form.getOldPassword() == null

                  || "".equals(form.getOldPassword().trim())) {

            request.setAttribute("statusCode", 300);

            request.setAttribute("message", this.getMessage(request,

                  "msg.oldpassword.invalid"));

            return mapping.findForward("done");

      }

 

      User user = AppContextHolder.getContext().getUser();

 

      try {

            UserManager uManager = BusinessFactory.getFactory()

                        .getUserManager();

            uManager.changePassword(user, form.getOldPassword(), form

                        .getPassword());

            request.setAttribute("statusCode", 200);

            request.setAttribute("message", this.getMessage(request,

                  "msg.operation.success"));

      } catch (PasswordNotCorrectException e) {

            request.setAttribute("statusCode", 300);

            request.setAttribute("message", this.getMessage(request,

                  "msg.password.incorrect"));

      }

 

      return mapping.findForward("done");

}

protected ActionForward callbackForward(ActionMapping mapping,

            HttpServletRequest request) {

      if (ServerInfo.isAjax(request))

            return mapping.findForward("done");

      return mapping.findForward("callbackDone");

}

 

}

public