【转】表单提交及关闭当前页面并刷新数据

在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="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)"

服务器端响应

Ajax表单提交后服务器端需要返回以下json代码:

{      "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、点击“添加”进入客户添加页面:

3、表单提交主要在添加页面中,即customer_addInput.jsp中设置:

<form method="post" action="<%=basePath%>/admin/customer_add.action" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
  <div class="pageFormContent" layoutH="56">
            <p>
    <label>客户昵称:</label>
    <input id="cus_id" type="text" name="customer.cus_id" size="30"  class="required"/>
   </p>
    <p>
    <label>客户名:</label>
    <input id="cus_name" type="text" name="customer.cus_name" size="30"  class="required"/>
   </p>
    <p>
    <label>邮箱:</label>
    <input id="cus_email" type="text" name="customer.cus_email" size="30"   class="required email"/>
   </p>
   <p>
    <label>客户类型:</label>
    <select name="customer.cus_type" class="required combox">
     <option value="">请选择</option>
     <option value="1">管理员</option>
     <option value="2" selected>客户</option>
    </select>
   </p>
   </div>
  <div class="formBar">
   <ul>
    <!--<li><a class="buttonActive" href="javascript:;"><span>保存</span></a></li>-->
    <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>

关键设置为: onsubmit="return validateCallback(this, navTabAjaxDone);

4、提交成功后转到的页面效果:

在最后进入的页面中设置:

{
 "statusCode":"200",
 "message":"\u64cd\u4f5c\u6210\u529f",//操作成功
 "navTabId":"info",//客户信息管理链接中的rel="info"
 "rel":"",
 "callbackType":"closeCurrent",//关闭当前页面
 "forwardUrl":"",
 "confirmMsg":""
}
以上即为成功后,显示操作成功,关闭当前页面,回到info中并刷新数据的效果
时间: 2024-07-31 21:56:24

【转】表单提交及关闭当前页面并刷新数据的相关文章

Node.JS的表单提交及OnceIO中接受GET/POST数据的三种方法

OnceIO 是 OnceDoc 企业私有内容(文档)管理系统的底层Web框架,它可以实现模板文件.静态文件的全缓存,运行起来完全不需要I/O操作,并且支持客户端缓存优化,GZIP压缩等(只压缩一次),拥有非常好的性能,为您节约服务器成本.它的模块化功能,可以让你的Web进行分布式存储,在一个扩展包里即可包含前端.后端和数据库定义,只需通过添加/删除目录的方式就可实现功能删减,实现真正的模块化扩展.目前 OnceIO 已经开源,本文主要介绍node.js语言中的表单提交及OnceIO中接受GET

自己搭建php服务器(可接受表单提交,并返回页面)

0.概述 本demo实现以下功能: ①在html页面输入姓名和邮箱,点击提交(这里为get) ②服务器通过解析表单内容,返回对“姓名”和“邮箱”的一个欢迎页面 1.软件准备 ①xampp 作用:提供apache服务 ②webStorm 作用:编辑html.php代码 2.服务器准备 进入xampp的hotdocs目录,如图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="

dedecms自定义表单提交成功如何返回当前页面

dedecms自定义表单提交成功如何返回当前页面 Dedecms是现在比较常用的CMS,利用dedecms建站的朋友们,肯定会做一个提交表单,对于会技术的童鞋来说,做这样一个简单的表单,是很容易的事情dedecms的自定义表单非常的灵活,无论是用户留言.在线报名.信息收集统统都可以通过自定义表单完成. 织梦自带的自定义表单提交过后会自动跳转到网站首页,可还是有很多人希望提交过后,返回当前页面,或者返回是其他的页面,等等;我们会根据自己需要实现的功能不同,而做相应的修改;下面雨田SEOER来吐槽一

form表单提交target属性使用

通过form表单提交刷新iframe <form action="doctor/selPackage" target="projectlistframe" id="frm"> <table width="80%" border="0" cellspacing="0" cellpadding="0" class="tableleft"

表单提交时如何将错误信息传递到页面中,并且保存原来提交数据

曾经何时,你还有我或许都在困惑,如何方便的将验证不通过的表单信息再返回到前台页面,例如我注册一个账号,辛辛苦苦填写了N多项,一个格式验证没有通过,一切都需要充填,虽然Ajax可以解决这个问题,但是我们总不能把所有表单提交都弄成ajax,更何况有若干人就是没事把javascript给禁止了.哎哎,好了解决方案来了,下面以用户登录为例,说说我的解决方案. 服务器端用nodejs实现: login.html 简单的提交表单 <form action="" id="loginF

yii2 表单提交一直报错 或者页面脚本写ajax,用firbug调试总是找不到地址页面404

在Yii框架中,为了防止csrf攻击,封装了CSRF令牌验证,使用Yii表单生成页面的时候,如果表单的提交方式为POST,是都会在页面中添加一个隐藏字段: <div style="display:none">     <input type="hidden" value="a429b6c0f4468db23a5661d1682db537fe2672c7" name="YII_CSRF_TOKEN" />

怎么实现form表单提交后不重新刷新当前页面

怎么实现表单提交后不重新刷新当前页面 如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.action' method='post'> <input type="button" id="btnSubmit" name="btnSubmit" value="保存" onclick="addKp()"

Servlet作业2-将表单提交的商品信息输出到页面中

1,表单页面 shangpin.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商品信息</title> 6 </head> 7 <body> 8 9 商品信息<br> 10 11 <form action="Shp" method="post

Html表单提交到Servlet输出到页面乱码

Html使用的编码是UTF-8编码显示页面,之后使用form表单提交字段到Servlet中,Servlet将利用getParamer方法获得form提交的字段,之后通过Respone中的writer将获取到的前台字段反馈到前台中去,出现中午乱码错误,这是因为添加了这个字段. response.setContentType("text/html"); 可见浏览器对后台提交的字段的一个识别作用,这个字段代表提交的字段是"文本/html",给浏览器识别,这样后台提交文本时