欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

ajax跨页面提交表单

程序员文章站 2022-11-22 21:03:06
前面提到过重复提交表单问题，处理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的时间设置问题需重新调整。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 豆浆的黄豆要煮熟吗？

下一篇： 在dom4j中使用XPath的简单实例

推荐阅读