这次给大家带来ajax怎样实现跨页面提交表单，ajax实现跨页面提交表单的注意事项有哪些，下面就是实战案例，一起来看一下。
前面提到过重复提交表单问题，处理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的时间设置问题需重新调整。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
ajax怎样提交form表单与实现文件上传
ajax后台success上传的json数据如何处理
以上就是ajax怎样实现跨页面提交表单的详细内容。