ajax跨页面提交表单

2024-09-01 08:27:40

字体：大中小

来源：转载

供稿：网友

前面提到过重复提交表单问题，处理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>

上一篇：AJAX实现瀑布流布局

下一篇：通过数据库和ajax方法写出地图的实例代码