這是在"TMS"項目中遇到的一個問題：當點擊提交按鈕（或button）之後，因爲要在表單提交後在頁面中判斷提交按鈕已經將表單提交了，一種方法就是利用ajax提交表單，然後在ajax中判斷提交按鈕已經被點擊過了，進而完成相應的其他功能，利用ajax提交表單的具體過程就是：在點擊了提交按鈕之後，利用js對錶單進行遍歷，然後將表單的相應參數組成一個字符串，將這個字符串拼接在ajax的url後面，然後利用ajax的post方式發出請求。
具體的jsp代碼如下：
<%@ 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>
<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
/*$(function(){
$("#submit").click(function(){
var url = "${pageContext.request.contextPath}/test.do?name=save";
var args = {random:Math.random()};
$.get(url, args, function(data){
alert("保存成功");
$("#submit1").attr("disabled", false);
});
});
$("#submit1").click(function(){
var url = "${pageContext.request.contextPath}/test.do?name=next";
var args = {random:Math.random()};
$.get(url, args, function(data){
$("#submit1").attr("disabled", true);
});
});
});*/
$(function(){
$("#submit").click(function(){
var form = document.getElementById("form1");
ajaxSubmitForm(form, "ididididid");
alert("保存成功，可以點擊'下一客戶'");
$("#submit1").attr("disabled", false);
});
$("#submit1").click(function(){
var url = "${pageContext.request.contextPath}/test.do?methodname=next";
var args = {random:Math.random()};
$.get(url, args, function(data){
$("#submit1").attr("disabled", true);
});
});
});
function ajaxSubmitForm(form, resultDivId) {
var elements = form.elements;// Enumeration the form elements
var element;
var i;
var postContent = "";// Form contents need to submit
for(i=0;i<elements.length;++i) {
var element=elements[i];
if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
else if(element.type=="select-one"||element.type=="select-multiple") {
var options=element.options,j,item;
for(j=0;j<options.length;++j){
item=options[j];
if(item.selected) {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";
}
}
} else if(element.type=="checkbox"||element.type=="radio") {
if(element.checked) {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
} else if(element.type=="file") {
if(element.value != "") {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
} else {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
}
//alert(postContent);
ajaxSubmit(form.action, form.method, postContent);
}
// url - the url to do submit
// method - "get" or "post"
// postContent - the string with values to be submited
// resultDivId - the division of which to display result text in, in null, then
// create an element and add it to the end of the body
function ajaxSubmit(url, method, postContent, resultDivId) {
var loadingDiv = document.getElementById('loading');
//alert(loadingDiv);
// call in new thread to allow ui to update
window.setTimeout(function () {
loadingDiv.innerText = "Loading....";
loadingDiv.style.display = "";
}, 1);
// code for Mozilla, etc.
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
// code for IE
else if (window.ActiveXObject) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp) {
if(method.toLowerCase() == "get") {
xmlhttp.open("GET", url + "?" + postContent, true);
xmlhttp.send(null);
} else if(method.toLowerCase() == "post") {
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(postContent);
}
xmlhttp.onreadystatechange = function() {
// if xmlhttp shows "loaded"
if (xmlhttp.readyState==4) {
if(resultDivId) {
document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;
} else {
var result = document.createElement("DIV");
result.style.border="1px solid #363636";
result.innerHTML = xmlhttp.responseText;
document.body.appendChild(result);
}
loadingDiv.innerHTML = "Submit finnished!";
}
};
} else {
loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web browser.";
}
}
</script>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form1" action="${pageContext.request.contextPath}/test.do" method="post">
<input type="hidden" name="methodname" value="save"/>
姓名：<input name="name" type="text"/>
年齡：<input name="age" type="text"/>
</form>
   
<button id="submit1" disabled="disabled">下一客戶</button>
           
<button id="submit">保存反饋</button>
</body>
</html>