DWZ表单提交及关闭当前页面并刷新数据
2013-10-22 17:57
204 查看
DWZ表单提交及关闭当前页面并刷新数据
在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下:
1.ajax表单提交给服务器
2.服务器返回一个固定格式json结构
3.js会调函数根据这个json数据做相应的处理
注意:
DWZ框架默认的ajax表单提交都是返回json数据,告诉客户端操作是否成功,成功或失败提示信息,以及成功后的处理方式(刷新某个navTab或关闭某个navTab或navTab页面跳转)。
表单提交后服务器操作失败了,客户端接收statusCode和message后给出错误提示,表单页面是不动的。这样可以方便用户看到出错原因后直接修改表单数据再次提交,而不用重填整个表单数据。当然如果你还是喜欢表单提交后直接载入html页面也是没有问题的,参照dwz.ajax.js自己扩展一下也是没问题的。
DWZ表单提交dwz.ajax.js
·
Ajax表单提交后自动调用默认回调函数,操作成功或失败提示.
Form标签上增加onsubmit="returnvalidateCallback(this);
·Ajax表单提交后如果需要重新加载某个navTab或关闭dialog,可以使用dwz.ajax.js中事先定义的方法navTabAjaxDone/dialogAjaxDone
注意:如果表单在navTab页面上使用navTabAjaxDone,表单在dialog页面上使用dialogAjaxDone
Form标签上增加onsubmit="returnvalidateCallback(this,navTabAjaxDone)"
或onsubmit="returnvalidateCallback(this,dialogAjaxDone)"
·Ajax表单提交后如果需要做一些其它处理也可以自定义一个回调函数xxxAjaxDone。例如下面表单提交成功后关闭当前navTab,或者重新载入某个tab.
Form标签上增加onsubmit="return
validateCallback(this,xxxAjaxDone)"
服务器端响应
Ajax表单提交后服务器端需要返回以下json代码:
{ "statusCode":"200", "message":"操作成功", "navTabId":"",//服务器转回navTabId可以把那个navTab标记为reloadFlag=1, 下次切换到那个navTab时会重新载入内容 "rel":"", "callbackType":"closeCurrent",//callbackType如果是closeCurrent就会关闭当前tab //只有callbackType="forward"时需要forwardUrl值 "forwardUrl":"" } 如果表单提交只提示操作是否成功,就可以不指定回调函数.框架会默认调用DWZ.ajaxDone() *<formaction="/user.do?method=save"onsubmit="returnvalidateCallback(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><ahref="customer_main.action?pager.currentPage=1"target="navTab"rel="info">客户信息管理</a></li>
2、点击“添加”进入客户添加页面:
<li>
<aclass="add"href="<%=basePath%>/admin/customer_addInput.jsp"target="navTab"><span>添加</span></a>
</li>
3、表单提交主要在添加页面中,即customer_addInput.jsp中设置:
<formmethod="post"action="<%=basePath%>/admin/customer_add.action"class="pageFormrequired-validate"onsubmit="returnvalidateCallback(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="requiredemail"/></p><p><label>客户类型:</label><selectname="customer.cus_type"class="requiredcombox"><optionvalue="">请选择</option><optionvalue="1">管理员</option><optionvalue="2"selected>客户</option></select></p></div><divclass="formBar"><ul><!--<li><aclass="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="returnvalidateCallback(this,navTabAjaxDone);
4、提交成功后转到的页面效果:
在最后进入的页面中设置:
{"statusCode":"200","message":"\u64cd\u4f5c\u6210\u529f",//操作成功"navTabId":"info",//客户信息管理链接中的rel="info""rel":"","callbackType":"closeCurrent",//关闭当前页面"forwardUrl":"","confirmMsg":""}
以上即为成功后,显示操作成功,关闭当前页面,回到info中并刷新数据的效果
相关文章推荐
- DWZ表单提交及关闭当前页面并刷新数据
- DWZ表单提交及关闭当前页面并刷新数据
- DWZ表单提交及关闭当前页面并刷新数据
- 表单提交及关闭当前页面并刷新数据《DWZ三》
- 【转】表单提交及关闭当前页面并刷新数据
- 使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法
- 2014.10.17 DWZ框架中ajax提交文件表单的处理(关闭当前dialog + 刷新父级navTab)
- DWZ框架中ajax提交文件表单的处理(关闭当前dialog + 刷新父级navTab)
- 关于showmodaldialog 打开新窗口后提交表单操作时,避免弹出新窗口和避免从后台获取“新数据”后不能刷新当前模态页面的解决方案
- DWZ框架中ajax提交文件表单的处理(关闭当前dialog + 刷新父级navTab)
- 使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
- easyui关于解决tab添加的页面通过href加载数据内容的页面刷新后form表单重复提交的问题;
- js实现表单提交后不重新刷新当前页面
- PHP Ajax,FormData收集表单数据(包括文件) 页面无刷新上传文件(提交表单)
- html基础 提交按钮 数据重置按钮 带图片的按钮 普通按钮,点击关闭当前页面
- 页面按F5刷新重复提交表单数据的解决办法
- 怎么让Form提交表单当前页面刷新不跳转
- html基础 提交按钮 数据重置按钮 带图片的按钮 普通按钮,点击关闭当前页面
- submit提交表单后,不刷新当前页面