SpringMVC 中如果使用了knockoutJs前端開發架構，在表單送出的時候隻需要把ViewModel中的資料以Ajax送出的方式送出到背景進行處理，這時候我們需要在前端做防止重複送出。這種防止重複送出隻能防止在頁面未重新整理立即進行的送出，雖然不能夠解決防止重複送出的所有情形，但是結合後端驗證，還是可以解決一部分問題。
後端防止重複送出的做法是查詢該表單中必填資料是否已在資料庫中存在，否則不允許送出。這兩種防止重複送出的方式結合，就能夠做到確定不存在備援資料。對于資料的驗證也可以采用前後端驗證結合，這樣就更加能夠確定資料的合理性。前端驗證可以使用knockout的驗證功能，或者自己結合控件的事件來做。後端驗證可以結合Hibernate的注解的方式實作模型的驗證。
1.前端頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<title>Post Demo</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="Jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="Jquery/knockout-3.3.0.js"></script>
<link rel="stylesheet" href="Jquery/bootstrap.min.css" target="_blank" rel="external nofollow" type="text/css"></link>
<script type="text/javascript" src="Jquery/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function MyViewModel() {
var self = this;
self.username = ko.observable();
self.password = ko.observable();
self.save = function () {
//JSON OBJECT
var data = ko.toJSON(self);
//JSON
//var d = JSON.stringify(data);
console.log(data);
//first time submit
if(parseInt($("#hidden").val()) == 0){
LoginDemo(data);
}
//second time
else{
alert("please do not submit again.");
}
};
}
ko.applyBindings(new MyViewModel());
/*
$("#loginDemo").click(function(){
$("form").submit();
});
*/
});
function LoginDemo(data){
$.ajax("LoginDemo.do", {
data: data,
type: "POST",
//contentType: "application/json",
success: function (result) {
$("#hidden").val(1);
alert(result);
//alert($("#hidden").val());
}
});
}
</script>
</head>
<body>
<br>
<br>
<div class="container">
<!--
<form action="LoginDemo.do" method="post" class="form-horizontal templatemo-create-account templatemo-container">
<table>
<tr>
<td><span>Username:</span></td>
<td><input type="text" name="username" data-bind="value: username"></td>
</tr>
<tr>
<td><span>Password:</span></td>
<td><input type="password" name="password" data-bind="value: password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="loginDemo" data-bind="click: save" value="Demo" style="width:280px"></td>
</tr>
</table>
<input type="hidden" id="hidden" name="token" value="0" />
</form>
-->
<table>
<tr>
<td><span>Username:</span></td>
<td><input type="text" name="username" data-bind="value: username"></td>
</tr>
<tr>
<td><span>Password:</span></td>
<td><input type="password" name="password" data-bind="value: password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="loginDemo" data-bind="click: save" value="Demo" style="width:280px"></td>
</tr>
</table>
<input type="hidden" id="hidden" name="token" value="0" />
</div>
</body>
</html>
說明:
頁面中有兩種表單方式：
1）一種是使用form的形式，這種形式的表單送出直接采用$("form").submit()的方式，後端我們采用實體類來接收傳遞到背景的值；
2）第二種是不使用表單的形式，這種形式下，我們把表單所綁定的資料源送出到背景，資料源是一個json對象，使用jackson來解析json成一個對象，然後就可以直接操作對象了。
3）前端防止重複送出，采用隐藏的hidden的方式，第一次送出成功并傳回值後改變hidden的值，每次送出則校驗目前值是否和初始值相同，如果相同則允許送出，否則不允許送出。
2.後端代碼
@RequestMapping(value = "/LoginDemo.do",method = RequestMethod.POST)
//@ResponseBody
public void LoginDemo(@RequestBody String data,HttpServletRequest request,HttpServletResponse response){
PrintWriter pw;
System.out.println(data);
try {
pw = response.getWriter();
pw.print(data);
pw.flush();
pw.close();
} catch (IOException e) {
e.printStackTrace();
}
}
3.效果
