《DWZ笔记三》表单提交及关闭当前页面并刷新数据
在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下:
2. 服务器返回一个固定格式json结构
3. js会调函数根据这个json数据做相应的处理
注意:
DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转)。
表单提交后服务器操作失败了,客户端接收statusCode和message后给出错误提示,表单页面是不动的。这样可以方便用户看到出错原因后直接修改表单数据再次提交,而不用重填整个表单数据。当然如果你还是喜欢表单提交后直接载入html页面也是没有问题的,参照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)"
{
"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":"会话超时"}
表单提交使用:
目标:用户信息添加---->进入添加页面-->提交表单-->显示成功提示并关闭当前添加页面同时回到原来页面并重新载入数据
1、后台index.html中:
设置一个客户信息管理链接:
<li><a href="customer_main.action?pager.currentPage=1" target="navTab" rel="info" >客户信息管理</a></li>
2、点击“添加”进入客户添加页面:
<li>
<a class="add" href="<%=basePath%>/admin/customer_addInput.jsp" target="navTab"><span>添加</span></a>
</li>
3、表单提交主要在添加页面中,即customer_addInput.jsp中设置:
<form method="post" action="<%=basePath%>/admin/customer_add.action" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
<divclass="pageFormContent"layoutH="56">
<p>
<label>客户昵称:</label>
<inputid="cus_id"type="text"name="customer.cus_id"size="30" class="required"/>
</p>
<p>
<label>客户名:</label>
<inputid="cus_name"type="text"name="customer.cus_name"size="30" class="required"/>
</p>
<p>
<label>邮箱:</label>
<inputid="cus_email"type="text"name="customer.cus_email"size="30" class="required email"/>
</p>
<p>
<label>客户类型:</label>
<selectname="customer.cus_type"class="required combox">
<optionvalue="">请选择</option>
<optionvalue="1">管理员</option>
<optionvalue="2"selected>客户</option>
</select>
</p>
</div>
<divclass="formBar">
<ul>
<!--<li><a class="buttonActive" href="javascript:;"><span>保存</span></a></li>-->
<li><divclass="buttonActive"><divclass="buttonContent"><buttontype="submit">保存</button></div></div></li>
<li>
<divclass="button"><divclass="buttonContent"><buttontype="button"class="close">取消</button></div></div>
</li>
</ul>
</div>
</form>
关键设置为: onsubmit="return validateCallback(this, navTabAjaxDone);
4、提交成功后转到的页面效果:
{
"statusCode":"200",
"message":"\u64cd\u4f5c\u6210\u529f",//操作成功
"navTabId":"info",//客户信息管理链接中的rel="info"
"rel":"",
"callbackType":"closeCurrent",//关闭当前页面
"forwardUrl":"",
"confirmMsg":""
}
以上即为成功后,显示操作成功,关闭当前页面,回到info中并刷新数据的效果
相关推荐
dwz页面图片显示jsdwz页面图片显示jsdwz页面图片显示js
dwz增删改查; spring mvc+ibatis;log4j配置文件 设置ibatis输出sql,便于跟踪问题;导入myeclipse配合数据库,就可以跑起来;
源码中包含DWZ与MVC框架搭建,以及DWZ提示框使用,自定义函数,表单提交,数据分页,框架页面等实例。
包括dwz使用手册及视频教程 DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。 DWZ框架...
j-ui原(DWZ富客户端框架),设计目标: 简单实用、扩展灵活、开发快速、RIA思路、轻量级;以HTML扩展的方式代替JavaScript代码,几乎可以达到用户不懂JavaScript也能很容易学会的使用,支持各种页面组件及Ajax相关...
dwz框架实现拦截器 session超时跳转登陆页面 DWZ框架 struts2拦截器 session超时
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替...
用java怎么把这样的json数据解析成数组? json数据的格式如下: [{"a":"111","b":"222","c":"333"},{"a":"1000","b":"2000","c":"000"},{"a":"999","b":"300","c":"700"}] 我希望把a对应的数据全部放到一个数组中,...
修复使用xheditor插件IE下兼容问题:IE下打开一个含有编辑器的页面,然后关闭,再打开不能录入问题 修复多文件上传插件uploadify 的html扩展方式,java读取不到数据流问题:原因是以前没有把input="file" 的name...
学习DWZ的建议 •通读DWZ文档,很多新手提的问题文档中都写了 •看demo每个组件演示效果和代码(留意组件html结构) •建议安装firebug,用firebug看html结构、CSS和调试JS都非常方便。见附录一 firebug介绍 •对于...
DWZ
压缩文件包含: DWZ框架 DWZ富客户端框架使用手册 DWZ框架使用的实例简单介绍
首先非常感谢DWZ官方整合了DWZ+ThinkPHP,方便我们PHPer的开发,DWZ的后台框架非常好用。 其次,本人在 DWZ官方 整合的基础上做了些修改,而且经测试完全可用,现在本人在此基础上开发项目。 修改的内容如下: 1、...
jqgird dwz 框架 扩展 类似jqgid table json获取初始化数据
dwz thinkphp3.0 角色管理
很好很实用的dwz框架里面还有api操作文档,免费下载
DWZ框架DWZ框架DWZ框架DWZ框架
DWZ框架会找到当前请求结果中的那些特别的class和attribute, 并自动关联上相应的js处理事件和效果。 DWZ基于jQuery,可以非常方便的定制特定需求的UI组件, 并以jQuery插件的形式发布出来,如有需要也可做定制化...
ajax自动刷新页面 类似于论坛注册时的 自动数字倒计时 自动跳转 适合新人看看
dwz时间控件