Heim > Artikel > Web-Frontend > So implementieren Sie die seitenübergreifende Formularübermittlung mit Ajax
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>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>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\"}"); } } }
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 aufsetTimeout(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-HintergrunderfolgsverarbeitungDas 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!