So implementieren Sie die seitenübergreifende Formularübermittlung mit Ajax-js-Tutorial-php.cn

So implementieren Sie die seitenübergreifende Formularübermittlung mit Ajax

php中世界最好的语言

Freigeben： 2018-04-03 14:22:57

Original

1484 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die seitenübergreifende Übermittlung eines Formulars mit Ajax implementieren. Werfen wir einen Blick darauf. Wie bereits erwähnt, besteht das Problem der wiederholten Formularübermittlung darin, die aktuelle Seite zu schließen und zu aktualisieren Die Seite, an die die Anfrage gesendet werden soll.

artDialog.js wird hier verwendet

1. Dateistruktur

2. user.jsp

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Seiteneffekt

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

Nach dem Login kopieren

Verwenden Sie $(' #userForm' ).serialize(); Serialisierte Formulardaten

window.opener.art.dialog({time:2,content:'Save success'}); gibt die Seite mit window.open zurück (oder als übergeordnete Seite verstehen), und rufen Sie 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 (für der übergeordneten Seite), müssen die Zeiteinstellungsprobleme des Dialogs und des Neuladens neu angepasst werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie sendet Ajax ein Formular und implementiert den Datei-Upload?

Wie wäre es mit den von hochgeladenen JSON-Daten? Ajax-Hintergrunderfolgsverarbeitung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die seitenübergreifende Formularübermittlung mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!