ajax跨页面提交表单

前面提到过重复提交表单问题，处理代币口令校验、重定向之外，还有一种经常使用到的方法就是新页面处理表单提交，完成后关闭当前页面，并刷新之前发送请求的页面。这里使用了artDialog.js

1、文件结构

2、user.jsp

“% @”页面语言=“Java”导入=“Java”。乌提尔。* "页面编码=' UTF-8 ' % @ taglib uri='/struts-tags '前缀=' s ' % @ taglib uri=' http://Java。星期日' com/JSP/jstl/core '前缀='c'%！' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题用户列表/title meta http-equ v=' pragma ' content=' no-cache ' meta http-equ v=' cache-control ' content=' no-cache ' meta http-equ v=' expires ' content=' 0 '脚本类型=' text/JavaScript ' src=' http :/MySh2/jquery-1。7 .js /脚本脚本类型=' text/JAVAScript ' src=' http 3360/MySh2/art dialog。js？skin=default/script脚本类型=' text/JavaScript '函数openA(){ window。打开('/Mysh2/user/manage _ addUI ')；}/script/head body br/a href=' s 3360 URL操作=' manage _ addUI '命名空间='/user/'添加用户/a a href=' JAVAScript : void(0)' onclick=' OpenA()'添加用户/a br/用户列表：br/s :迭代器值=' #请求。用户id :s :属性值=' id '/br/name :s :属性值=' name '/br//s :迭代器/正文/html 3、userAdd.jsp

“% @”页面语言=“Java”导入=“Java”。乌提尔。* "页面编码=' UTF-8 ' % @ taglib uri='/struts-tags '前缀=' s ' % @ taglib uri=' http://Java。星期日' com/JSP/jstl/core '前缀='c'%！' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题用户添加/title meta http-equ v=' pragma ' content=' no-cache ' meta http-equ v=' cache-control ' content=' no-cache ' meta http-equ v=' expires ' content=' 0 '脚本类型=' text/JavaScript ' src=' http :/MySh2/jquery-1。7 .js /脚本脚本类型=' text/JavaScript '函数addUSer(){ var submit data=$(' # user form ').serialize()；控制台。日志(提交数据)；$.ajax({ type : 'post '，URL : '/Mysh2/user/manage _ add '，cache : false，data: submitData，dataType : 'json '，success 3360 function(result){ span style=' white-space : pre '/span f(result。成功){ window。开瓶器。艺术。对话框({时间：2，内容： '保存成功'});setTimeout(函数(){ window。开瓶器。位置。重载()；},3);} else { span style=' white-space : pre '/span window。开瓶器。艺术。对话框({时间：2，内容： '保存失败'});setTimeout(函数(){ window。开瓶器。位置。重载()；},3);}窗口。close()；},错误：函数(XMLHttpRequest，textStatus，错误通过){ alert(' error ')；} });}/script/head body s 3360表单id=' userForm ' action=' manage _ add ' namespace='/user ' method=' post '用户名：s : ext字段名=' user。名称/br/s :令牌/s 3360令牌输入类型='按钮'值='保存onclick=' AddUser()'//s 3360表单/正文/html 4、UserManageAction.java

打包。mysh 2。行动；导入Java。io。ioexception导入Java。io。版画作家；导入javax。注释。资源；导入javax。servlet。servletexception导入组织。阿帕奇。支柱2。servletactioncontext导入组织。弹簧框架。语境。注释。范围；导入组织。弹簧框架。刻板印象。控制器；导入com。mysh 2。比恩。用户；导入com。mysh 2。ServiCe。UserServiCe导入com。开放式交响乐。xwork 2。行动背景；导入com。开放式交响乐。xwork 2。行动支持；@控制器@作用域(“原型”)公共类用户管理操作扩展了操作支持{ @资源用户服务用户服务；私人用户；公共用户getUser(){返回用户；}公共void setUser(用户用户用户){ this . user=user } public String addUI(){ 0返回”添加”；} public void add()引发ServletException，IOexception { servletactioncontext。getresponse().setContentType(' text/html；charset=utf-8 ')；PrintWriter out=servletactioncontext。getresponse().getWriter()；请尝试{ userService.addUser(用户);ActionContext.getContext().放('消息','保存成功');出去。写(' { \ ' success ' : true } ')；} catch(异常e){ e . print stack trace()；出去。write(' { \ ' success ' : false，\ ' msg ' : ' error \ ' } ')；} } } 页面效果

提交表单时使用$('#userForm ').serialize()；序列化表单数据窗户。开瓶器。艺术。对话框({时间：2，内容： '保存成功'});则是返回使用窗户。打开的页面（或者理解为父页面),并调用艺术对话插件的定时关闭dialogsetTimeout(函数(){ window。开瓶器。位置。重载()；},3);使用定时器刷新使用窗户。打开的页面（或者理解为父页面),对话框和再装的时间设置问题需重新调整。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。