《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中并刷新数据的效果
相关推荐
2. **Ajax集成**:DWZ内置了Ajax支持,使得页面无需刷新就能实现数据的动态加载和更新。这极大地提高了用户体验,减少了网络通信的开销。 3. **表单处理**:DWZ提供了强大的表单处理功能,包括表单验证和数据提交。...
首先,DWZ框架的核心特性在于它提供了一套完整的前端解决方案,包括页面布局、表单处理、数据展示、导航菜单、对话框等常见的Web应用需求。这些组件均遵循一致的设计模式,易于理解和集成到项目中。例如,页面布局...
3. **AJAX集成**:DWZ对AJAX进行了封装,简化了异步数据请求和更新,支持局部刷新,提高了页面的交互性和响应速度。 4. **页面管理**:DWZ有强大的页面管理机制,如页面缓存、页面跳转控制、页面历史记录管理,使得...
当表单提交成功并返回JSON数据时,根据`callbackType`决定是关闭当前navTab(`closeCurrent`)、重定向到新URL(`forward`)还是刷新页面。 二、Dialog的刷新方法 1. `$$.pdialog.reload(url, data, dlid)`:这个方法...
6. Ajax表单处理:DWZ框架中的Ajax表单处理功能包括了普通表单提交、文件上传表单提交、表单查询等功能,简化了表单数据的处理流程。 7. 异步请求处理:DWZ中的dwz.ajax.js组件用于处理Ajax请求,提供了一套简洁的...
- **普通Ajax表单提交**: 通过Ajax提交表单数据而不刷新页面。 - **服务器端响应**: 处理来自服务器端的响应消息。 - **文件上传表单提交**: 支持文件上传的表单提交。 - **Java服务器端表单处理示例**: 展示如何在...
3. **Ajax无刷新交互**:通过Ajax技术,DWZ实现了页面无需刷新即可进行数据交互,提高了用户的操作体验。 4. **丰富的UI组件**:包括下拉菜单、按钮、分页、弹出窗口、时间选择器等,这些组件都是经过精心设计,...
DWZ框架集成了众多实用功能,如Ajax、页面跳转、表单验证、弹出层、tabs、下拉树等,使得开发者可以快速地搭建功能丰富的Web应用。 API文档是DWZ框架的重要组成部分,它详细解释了框架提供的各种函数、方法、类和...
4. **表单提交**:ASP.NET MVC中的表单提交通常与Model绑定相结合,开发者可以学习如何创建表单,设置数据绑定,以及处理表单提交事件,实现数据的验证和保存。 5. **表单验证**:DWZ和ASP.NET MVC都提供了表单验证...
- **Ajax支持**:通过Ajax技术,DWZ可以实现页面无刷新更新,提高用户交互性。 - **布局管理**:DWZ有强大的页面布局工具,支持流式、网格等多种布局方式,便于开发人员按照需求快速构建页面结构。 - **表单处理*...
例如,添加新数据时,我们可以使用DWZ的AjaxForm组件,通过异步提交表单,然后在回调函数中处理返回的结果,如显示成功提示或错误信息。删除操作类似,通常会有一个确认对话框,点击确认后发送Ajax请求,服务器返回...
3. **AJAX交互**:DWZ支持AJAX无刷新操作,通过封装的API可以方便地实现页面局部更新,提升用户体验。 4. **数据表格**:提供强大的数据表格组件,支持动态加载、排序、过滤、分页等功能,同时与后端数据接口无缝...
在具体应用中,DWZ的Ajax功能可以无缝对接ASP.NET MVC3的Ajax动作方法,实现无刷新页面更新。例如,使用DWZ的表格组件,可以通过Ajax调用MVC3的Controller中的Action获取数据,然后动态填充到表格中,提供快速的数据...
`dwz页面图片显示js`主要指的是DWZ框架中用于处理页面图片显示的JavaScript代码,这些代码通常包含了图片预加载、缩放、轮播、懒加载等功能,以提升用户体验。 一、图片预加载 预加载是提高页面加载速度的一种技术...
首先,DWZ框架的主体结构包括页面布局、表单处理、对话框、表格操作、菜单导航等多个模块,这些模块通过JavaScript和CSS进行封装,实现了页面动态加载、异步数据交互等功能。框架内部集成了jQuery库,利用其强大的...
4. **表单处理**:DWZ内置了表单验证和提交功能,可以快速实现表单的验证逻辑,同时支持JSON格式的数据提交,与后端接口无缝对接。 5. **数据网格**:数据网格组件支持分页、排序、过滤和自定义列显示等功能,方便...
2. **AJAX无刷新技术**:DWZ框架支持AJAX无刷新操作,使得用户在不刷新整个页面的情况下,可以完成数据的增删查改。这显著提升了应用的响应速度,减少了网络传输的数据量。 3. **对话框(Dialog)**:DWZ框架的...
【标题】"dwz增删改查"是一个关于使用DWZ框架进行基本的CRUD(创建、读取、更新、删除)操作的项目。DWZ全称是"Dynamic Web Zone",是一个基于jQuery的前端MVC框架,常用于构建富交互的Web应用。在这个项目中,...
DWZ内置了Ajax处理机制,使得页面无需刷新即可进行数据交互,提高了用户体验。通过AJAX请求,可以轻松实现数据的异步加载、分页、排序等功能。 4. **页面布局** 页面布局是DWZ的一个强项,它支持流式、固定、...