ajax跨页面提交表单

最新推荐文章于 2022-04-08 16:19:26 发布

zz_cl

最新推荐文章于 2022-04-08 16:19:26 发布

阅读量517

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/zz_cl/article/details/52718503

版权

ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

前面提到过重复提交表单问题，处理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)" οnclick="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="保存" οnclick="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的时间设置问题需重新调整。

zz_cl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ajax跨页面提交表单

前面提到过重复提交表单问题，处理token口令校验、重定向之外，还有一种经常使用到的方法就是新页面处理表单提交，完成后关闭当前页面，并刷新之前发送请求的页面。这里使用了artDialog.js1、文件结构2、user.jsp user列表 function openA(){ window.open("/M
复制链接

扫一扫