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

页面效果

提交表单时使用$('#userForm').serialize();序列化表单数据
 window.opener.art.dialog({time:2,content:'保存成功'});则是返回使用window.open的页面(或者理解为父页面)，并调用artDialog插件的定时关闭dialog
setTimeout(function(){window.opener.location.reload();},3);使用定时器刷新使用window.open的页面(或者理解为父页面)，dialog和reload的时间设置问题需重新调整。

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

赞 (0)

相关推荐

  • jQuery ajax中使用serialize()方法提交表单数据示例

    jQuery ajax中使用serialize()方法提交表单数据示例

    jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({   type: "POST",   url: ajaxCallU

  • JQuery打造PHP的AJAX表单提交实例

    如果你对JQuery的基本语法还不是很熟悉,请搜索本站的教程资源.如果你对PHPMailer用法不熟悉,请查看本站的另一篇文章<使用PHPMailer类库发送电子邮件>. 第一步,创建一个表单HTML页面 这里,我们只展示主要的表单部分HTML结构代码: 复制代码 代码如下: <div id="contact_form"> <form name="contact" method="post" action="

  • jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码

    (jsp需要引入 :jquery-1.9.0.js.jquery.form.js ) ,jsp页面使用的是bootstrap制作的,看不懂的标签不用管,form表单大同小异.代码比较简陋,只是为了演示使用ajaxSubmit异步上传图片及保存数据,请海含! (参考文献:http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html) 一:web (add.jsp) 复制代码 代码如下: <%@page impor

  • JQuery通过Ajax提交表单并返回结果

    JQuery通过Ajax提交表单并返回结果

    如下: 1:非Ajax 前台: 对应后台: 2:JQuery之Ajax 在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有: 功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON. 首先,我们假设返回的JSON实体为: 复制代码 代码如下: public class LoginResult

  • JS实现支持Ajax验证的表单插件

    JS实现支持Ajax验证的表单插件

    本文为大家分享了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式

  • jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码 代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • Ajax提交表单时验证码自动验证 php后端验证码检测

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> <head> <title>验证码提交自验证</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta htt

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

随机推荐