千家信息网

ajax如何跨页面提交表单

发表于:2024-11-17 作者:千家信息网编辑
千家信息网最后更新 2024年11月17日,这篇文章将为大家详细讲解有关ajax如何跨页面提交表单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前面提到过重复提交表单问题,处理token口令校验、重定向之外,
千家信息网最后更新 2024年11月17日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"%>      user列表                    
">添加用户 添加用户
用户列表:
id:
name:

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"%>      用户添加                      用户名:

4、UserManageAction.java

package com.myssh3.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.myssh3.bean.User; import com.myssh3.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如何跨页面提交表单"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

0