ajax跨頁面提交表單

ajax跨頁面提交表單_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前面提到過重複提交表單問題，處理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的時間設定問題需重新調整。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More