formulaire de soumission multipage ajax-js tutoriel-php.cn

formulaire de soumission multipage ajax

韦小宝

Libérer： 2017-12-30 20:10:56

original

1687 Les gens l'ont consulté

Cet article présente principalement en détail les informations pertinentes du formulaire de soumission multi-pages ajax pour tout le monde. Il a une certaine valeur de référence et d'apprentissage de ajax et est utile pour . ajaxLes amis intéressés peuvent se référer à

Comme mentionné précédemment, le problème des soumissions répétées de formulaires En plus de gérer la vérification et la redirection du mot de passe du jeton, il existe une autre méthode fréquemment utilisée qui consiste à traiter les soumissions de formulaires sur un. nouvelle page. , fermez la page actuelle une fois terminée et actualisez la page qui a envoyé la demande auparavant.
artDialog.js est utilisé ici

1. Structure du fichier

2. >

<%@ 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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

Effet de page

Utilisez $('#userForm').serialize() lors de la soumission du formulaire ; sérialisez les données du formulaire window.opener.art.dialog({time:2,content:'Enregistrez avec succès '}); renvoie ensuite la page en utilisant window.open (ou comprise comme la page parent) et appelle la boîte de dialogue de fermeture programmée du plug-in artDialog

setTimeout(function(){window.opener.location.reload(); }, 3); Utilisez une minuterie pour actualiser la page en utilisant window.open (ou comprenez-la comme la page parent). Les paramètres d'heure de dialogue et de rechargement doivent être réajustés.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun ! !

Recommandations associées :

Exemple de validation de formulaire Ajax

Le formulaire Ajax soumet les données du fichier de manière asynchrone

validation asynchrone du formulaire ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!