DWZ富客户端框架-Ajax表单
Ajax表单
Ajax表单相关的操作封装在dwz.ajax.js中。表单查询、分页、表单提交js方法都已经封装在里面了。开发人员自己不需写js,按标准使用就可以了。表单查询
DWZ中定义表单查询和分页都是用这个pagerForm来临时存查询条件。所以需要在查询页面上放下面的form<formid="pagerForm" action="xxx" method="post">
<input type="hidden" name="pageNum"value="1" /><!--【必须】value=1可以写死-->
<input type="hidden" name="numPerPage"value="20" /><!--【可选】每页显示多少条-->
<input type="hidden" name="orderField"value="xxx" /><!--【可选】查询排序-->
<!--【可选】其它查询条件,业务有关,有什么查询条件就加什么参数-->
<input type="hidden" name="status" value="active" />
</form>
ajax表单查询<form action="xxx" method="post" onsubmit="returnnavTabSearch(this)">
或<form action="xxx" method="post" onsubmit="returndialogSearch(this)">
修改每页显示行数<select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select>
/**
* 处理navTab弹出层上的查询, 会重新载入当前navTab
* @param{Object} form
*/
function navTabSearch(form){
navTab.reload(form.action, $(form).serializeArray());
return false;
}
/**
* 处理dialog弹出层上的查询, 会重新载入当前dialog
* @param{Object} form
*/
function dialogSearch(form){
$.pdialog.reload(form.action, $(form).serializeArray());
return false;
}
/**
* 处理navTab中的分页和排序
* @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}
*/
function navTabPageBreak(args){
var form = _getPagerForm(navTab.getCurrentPanel(), args);
if (form) navTab.reload(form.action, $(form).serializeArray());
}
/**
* 处理dialog中的分页和排序
* @paramargs {pageNum:"n",numPerPage:"n", orderField:"xxx"}
*/
function dialogPageBreak(args){
var form = _getPagerForm($.pdialog.getCurrent(), args);
if (form) $.pdialog.reload(form.action, $(form).serializeArray());
}
ajax表单查询完整示例:<div class="pageHeader">
<form action="/render.do?method=search"method="post" onsubmit="returnnavTabSearch(this)">
<input type="hidden" name="resourceStatus" value="${param.resourceStatus}"/>
<input type="hidden" name="pageNum" value="1" />
<input type="hidden" name="orderField" value="${param.orderField}"/>
<div class="searchBar">
<div class="searchContent">
<select name="resourceType">
<option value="">全部栏目</option>
<c:forEach var="item" items="${model.resourceTypes}">
<option value="${item.id}"${param.resourceType eq item.id?"selected":"" }>${item.name}</option>
</c:forEach>
</select>
<input name="keywords"type="text" size="25" value="${param.keywords}"/>
</div>
<div class="subBar">
<ul>
<li><div class="buttonActive"><div class="buttonContent"><button type="submit">检索</button></div></div></li>
</ul>
</div>
</div>
</form>
</div>
普通Ajax表单提交
DWZ框架Ajax无刷新表单提交处理流程是:
- ajax表单提交给服务器
- 服务器返回一个固定格式json结构
- js会调函数根据这个json数据做相应的处理
DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转)。
表单提交后服务器操作失败了,客户端接收statusCode和message后给出错误提示,表单页面是不动的。这样可以方便用户看到出错原因后直接修改表单数据再次提交,而不用重填整个表单数据。当然如果你还是喜欢表单提交后直接载入html页面也是没有问题的,参照dwz.ajax.js自己扩展一下也是没问题的。
DWZ 表单提交dwz.ajax.js
- Ajax 表单提交后自动调用默认回调函数, 操作成功或失败提示.
- Ajax 表单提交后如果需要重新加载某个navTab或关闭dialog,可以使用dwz.ajax.js中事先定义的方法navTabAjaxDone/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":"",
"rel":"",
"callbackType":"closeCurrent",
"forwardUrl":""
}
以下是dwz.ajax.js中定义的navTabAjaxDone和dialogAjaxDone代码片段:/**
* navTabAjaxDone是DWZ框架中预定义的表单提交回调函数.
* 服务器转回navTabId可以把那个navTab标记为reloadFlag=1, 下次切换到那个navTab时会重新载入内容.
* callbackType如果是closeCurrent就会关闭当前tab
* 只有callbackType="forward"时需要forwardUrl值
* navTabAjaxDone这个回调函数基本可以通用了,如果还有特殊需要也可以自定义回调函数.
* 如果表单提交只提示操作是否成功, 就可以不指定回调函数. 框架会默认调用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":"会话超时"}
*
*/
function navTabAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){ //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的
navTab.reloadFlag(json.navTabId);
} else { //重新载入当前navTab页面
navTabPageBreak();
}
if ("closeCurrent" ==json.callbackType) {
setTimeout(function(){navTab.closeCurrentTab();}, 100);
} else if ("forward" ==json.callbackType) {
navTab.reload(json.forwardUrl);
}
}
}
/**
* dialog上的表单提交回调函数
* 服务器转回navTabId,可以重新载入指定的navTab. statusCode=DWZ.statusCode.ok表示操作成功, 自动关闭当前dialog
*
* form提交后返回json数据结构,json格式和navTabAjaxDone一致
*/
function dialogAjaxDone(json){
DWZ.ajaxDone(json);
if (json.statusCode == DWZ.statusCode.ok){
if (json.navTabId){
navTab.reload(json.forwardUrl, {}, json.navTabId);
}
$.pdialog.closeCurrent();
}
}
示例:
<form method="post" action="url" class="pageFormrequired-validate" onsubmit="returnvalidateCallback(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>