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