ajax跨页面提交表单

时间:2021-05-28

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

1、文件结构

2、user.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>user列表</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="/MySSH2/jquery-1.7.js"></script> <script type="text/javascript" src="/MySSH2/artDialog.js?skin=default"></script> <script type="text/javascript"> function openA(){ window.open("/MySSH2/user/manage_addUI"); } </script> </head> <body> <br/> <a href="<s:url action="manage_addUI" namespace="/user"/>">添加用户</a> <a href="javascript:void(0)" onclick="openA()">添加用户</a> <br/> 用户列表:<br/> <s:iterator value="#request.users"> id:<s:property value="id"/><br/> name:<s:property value="name"/><br/> </s:iterator> </body> </html>

3、userAdd.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户添加</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <script type="text/javascript" src="/MySSH2/jquery-1.7.js"></script> <script type="text/javascript"> function AddUser(){ var submitData = $('#userForm').serialize(); console.log(submitData); $.ajax({ type : "post", url : "/MySSH2/user/manage_add", cache : false, data: submitData, dataType : 'json', success : function(result) { <span style="white-space:pre"> </span>if(result.success){ window.opener.art.dialog({time:2,content:'保存成功'}); setTimeout(function(){window.opener.location.reload();},3); } else{ <span style="white-space:pre"> </span> window.opener.art.dialog({time:2,content:'保存失败'}); setTimeout(function(){window.opener.location.reload();},3); } window.close(); }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert("error"); } }); } </script> </head> <body> <s:form id="userForm" action="manage_add" namespace="/user" method="post"> 用户名:<s:textfield name="user.name"/><br/><s:token></s:token> <input type="button" value="保存" onclick="AddUser()"/> </s:form> </body> </html>

4、UserManageAction.java

package com.myssh2.action; import java.io.IOException; import java.io.PrintWriter; import javax.annotation.Resource; import javax.servlet.ServletException; import org.apache.struts2.ServletActionContext; import org.springframework.context.annotation.Scope; import org.springframework.stereotype.Controller; import com.myssh2.bean.User; import com.myssh2.service.UserService; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; @Controller @Scope("prototype") public class UserManageAction extends ActionSupport{ @Resource UserService userService; private User user; public User getUser() { return user; } public void setUser(User user) { this.user = user; } public String addUI(){ return "add"; } public void add() throws ServletException, IOException{ ServletActionContext.getResponse().setContentType("text/html;charset=utf-8"); PrintWriter out = ServletActionContext.getResponse().getWriter(); try { userService.addUser(user); ActionContext.getContext().put("message", "保存成功"); out.write("{\"success\":true}"); } catch (Exception e) { e.printStackTrace(); out.write("{\"success\":false,\"msg\":\"error\"}"); } } }

页面效果

提交表单时使用$('#userForm').serialize();序列化表单数据
window.opener.art.dialog({time:2,content:'保存成功'});则是返回使用window.open的页面(或者理解为父页面),并调用artDialog插件的定时关闭dialog
setTimeout(function(){window.opener.location.reload();},3);使用定时器刷新使用window.open的页面(或者理解为父页面),dialog和reload的时间设置问题需重新调整。

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

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章