ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax クロスページ送信フォーム

Ajax クロスページ送信フォーム

韦小宝オリジナル: 2017-12-30 20:10:561693ブラウズ

この記事は主にajaxクロスページ投稿フォームの関連情報を詳しく紹介しています。ajaxに興味のある友人は、前の前提を参照してください。トークンパスワードの検証とリダイレクトの処理に加えて、フォームの送信を繰り返し行うという問題が発生しました。完了後に、現在のページを閉じて、以前にリクエストがあったページを更新するという方法もよく使用されます。送信済み。

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

りー

4 , UserManageAction.java

<%@ 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 = $(&#39;#userForm&#39;).serialize(); 
 console.log(submitData); 
 $.ajax({ 
    type : "post", 
    url : "/MySSH2/user/manage_add", 
    cache : false, 
    data: submitData, 
    dataType : &#39;json&#39;, 
    success : function(result) { 
    <span style="white-space:pre">  </span>if(result.success){ 
       window.opener.art.dialog({time:2,content:&#39;保存成功&#39;}); 
       setTimeout(function(){window.opener.location.reload();},3); 
      } 
      else{ 
      <span style="white-space:pre"> </span> window.opener.art.dialog({time:2,content:&#39;保存失败&#39;}); 
        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>

ページ効果

$('#userForm').serialize(); を使用してフォームデータをシリアル化します

window.opener.art.dialog( {time: 2,content:'正常に保存'}); 次に、window.open (または親ページとして理解される) を使用してページを返し、artDialog プラグインのスケジュールされた終了ダイアログを呼び出します

setTimeout(function(){window.opener. location .reload();},3); window.open を使用してページを更新するには、ダイアログとリロードの時間設定を再調整する必要があります。

以上がこの記事の全内容です、皆様の学習に少しでもお役に立てれば幸いです！！

Ajax クロスページ送信フォーム

関連記事