前面提到過(guò)重復(fù)提交表單問(wèn)題，處理token口令校驗(yàn)、重定向之外，還有一種經(jīng)常使用到的方法就是新頁(yè)面處理表單提交，完成后關(guān)閉當(dāng)前頁(yè)面，并刷新之前發(fā)送請(qǐng)求的頁(yè)面。
這里使用了artDialog.js
1、文件結(jié)構(gòu)
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 = $('#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>
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\"}");
}
}
}
頁(yè)面效果
提交表單時(shí)使用$('#userForm').serialize();序列化表單數(shù)據(jù)
window.opener.art.dialog({time:2,content:'保存成功'});則是返回使用window.open的頁(yè)面(或者理解為父頁(yè)面)，并調(diào)用artDialog插件的定時(shí)關(guān)閉dialog
setTimeout(function(){window.opener.location.reload();},3);使用定時(shí)器刷新使用window.open的頁(yè)面(或者理解為父頁(yè)面)，dialog和reload的時(shí)間設(shè)置問(wèn)題需重新調(diào)整。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- Ajax提交表單時(shí)驗(yàn)證碼自動(dòng)驗(yàn)證 php后端驗(yàn)證碼檢測(cè)
- JS實(shí)現(xiàn)支持Ajax驗(yàn)證的表單插件
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jQuery使用ajaxSubmit()提交表單示例
- JQuery通過(guò)Ajax提交表單并返回結(jié)果
- JQuery打造PHP的AJAX表單提交實(shí)例
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jQuery ajax中使用serialize()方法提交表單數(shù)據(jù)示例
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
