Heim > Artikel > Web-Frontend > Ajax-Seitenübergreifendes Einreichungsformular

Ajax-Seitenübergreifendes Einreichungsformular

韦小宝Original: 2017-12-30 20:10:561641Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum seitenübergreifenden Ajax-Einreichungsformular für alle im Detail vor. Er hat einen gewissen Referenz- und Lernwert von Ajax und ist hilfreich für ajaxInteressierte Freunde können sich auf

Wie bereits erwähnt, gibt es neben der Handhabung der Token-Passwortüberprüfung und -Umleitung eine weitere häufig verwendete Methode, nämlich die Verarbeitung von Formularübermittlungen auf einem Neue Seite, schließen Sie die aktuelle Seite, wenn Sie fertig sind, und aktualisieren Sie die Seite, die die Anfrage zuvor gesendet hat.
artDialog.js wird hier verwendet

1. Dateistruktur

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 = $(&#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>

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

Seiteneffekt

Verwenden Sie $('#userForm').serialize() beim Absenden des Formulars; Formulardaten serialisieren
window.opener.art.dialog({time:2,content:'Speichern erfolgreich '}); gibt dann die Seite mit window.open (oder als übergeordnete Seite verstanden) zurück und ruft den geplanten Schließdialog des artDialog-Plugins auf
setTimeout(function(){window.opener.location.reload(); }, 3); Verwenden Sie einen Timer, um die Seite mit window.open zu aktualisieren (oder verstehen Sie sie als übergeordnete Seite. Die Zeiteinstellungen von Dialog und Neuladen müssen neu angepasst werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein! !

Verwandte Empfehlungen:

Ajax-Formularvalidierungsbeispiel

Ajax-Formular übermittelt Dateidaten asynchron

Asynchrone Ajax-Formularvalidierung

Das obige ist der detaillierte Inhalt vonAjax-Seitenübergreifendes Einreichungsformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen CodesNächster Artikel：Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes

In Verbindung stehende Artikel

Mehr sehen