这次给大家带来ajax怎样实现跨页面提交表单，ajax实现跨页面提交表单的注意事项有哪些，下面就是实战案例，一起来看一下。
前面提到过重复提交表单问题，处理token口令校验、重定向之外，还有一种经常使用到的方法就是新页面处理表单提交，完成后关闭当前页面，并刷新之前发送请求的页面。
这里使用了artDialog.js
1、文件结构
2、user.jsp
user列表 function openA(){ window.open("/MySSH2/user/manage_addUI"); }
<a href="https://www.php.cn/faq/">添加用户 添加用户
用户列表：
id:
name:
登录后复制
3、userAdd.jsp
用户添加 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) { if(result.success){ window.opener.art.dialog({time:2,content:'保存成功'}); setTimeout(function(){window.opener.location.reload();},3); } else{ window.opener.art.dialog({time:2,content:'保存失败'}); setTimeout(function(){window.opener.location.reload();},3); } window.close(); }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert("error"); } }); }用户名:
登录后复制
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怎样实现跨页面提交表单的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2775695.html
