DWZ框架Ajax表单提交

为什么80%的码农都做不了架构师？>>>   

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

转载于:https://my.oschina.net/dwz/blog/4163