ajax跨页面提交表单

程序员文章站 2022-05-14 21:05:27

前面提到过重复提交表单问题，处理token口令校验、重定向之外，还有一种经常使用到的方法就是新页面处理表单提交，完成后关闭当前页面，并刷新之前发送请求的页面。这里使用了...

前面提到过重复提交表单问题，处理token口令校验、重定向之外，还有一种经常使用到的方法就是新页面处理表单提交，完成后关闭当前页面，并刷新之前发送请求的页面。
这里使用了artdialog.js

1、文件结构

ajax跨页面提交表单

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\"}"); 
  } 
 } 
}

页面效果

ajax跨页面提交表单

提交表单时使用$('#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和JavaScript的区别

下一篇： js+ajax处理java后台返回的json对象循环创建到表格的方法

ajax跨页面提交表单

提交表单最简单的AJAX程序分享

Ajax提交Form表单页面仍会刷新问题的快速解决办法

jQuery ajax 提交表单图片

ci检测是ajax还是页面post提交数据的方法_php实例

ci检测是ajax还是页面post提交数据的方法_php实例

ajax的配置详情、ajax的调用解释、ajax的中文乱码和ajax的表单提交（内有实例）

防止外部提交表单|禁止跨站提交

ajax获取到的id数据，怎么通过post方式提交该数据到post页面去

在html里面用submit方式提交表单后，在另一个页面如何将值取出来_html/css_WEB-ITnose

ci检测是ajax还是页面post提交数据的方法