JaveWeb學習——用按鈕通過ajax提交表格到servlet時遇到的問題

這是一個項目中遇到的一個很莫名的bug，至今不知道原理是什麼（有空再度娘吧）

 

問題描述：

在form中填寫內容，並通過一個標籤爲button的按鈕，點擊跳轉到js進行判斷，在某一條判斷語句是用ajax提交到servlet，servlet訪問數據庫存儲表格內容

————以上這些功能全部能成功—————

但是ajax照理在servlet完成後可以獲取返回值，但最後沒有任何返回值（sucess、error甚至complete都沒有）。

 

 貼一下相應代碼：

<form class="form-signin" id="Signup-form" method="post">
		<h1 class="text-center mb-3 font-weight-normal">註冊</h1>
		<div class="mb-3">
			<label for="email">郵箱</label>
			<input type="email" class="form-control form-signup" id="usrEmail" name="usrEmail" placeholder="[email protected]">
		</div>
		<div class="mb-3">
			<label for="usrName">用戶名</label>
			<input type="text" class="form-control form-signup" id="usrName" name="usrName">
		</div>
		<div class="mb-3">
			<label for="usrKey">密碼</label>
			<input  type="password" class="form-control form-signup" id="usrKey" name="usrKey" >
		</div>
		<div class="mb-3">
			<label for="cfmKey">確認密碼</label>
			<input type="password" class="form-control form-signup" id="cfmKey">
		</div>
		<div class="mb-3 ro">
			<label for="vcode">驗證碼</label>
			<div class="row">
				<div class="col-md-7">
					<input type="text" class="form-control form-signup" id="vcode" placeholder="不區分大小寫"> 
				</div>
				<div class="col-md-5">
					<input type="text" readonly="readonly" class="form-control code" id="checkCode" onClick="createCode()"> 
				</div>
			</div>
		</div>
		<button class="btn btn-lg btn-primary btn-block btn-login" onclick="validate()">註冊</button>
		<div class="text-center alert alert-dark alert-login">
			<a href="login.jsp" class="alert-link">已有賬戶？</a>
		</div>
	</form>

對應js部分：

function validate () {   
	var inputCode = document.getElementById("vcode").value;
	var name = document.getElementById("usrName").value;
	var email = document.getElementById("usrEmail").value;
	var password = document.getElementById("usrKey").value;
	var cfmKey = document.getElementById("cfmKey").value;
	if (inputCode.length <=0) {   
		alert("請輸入驗證碼！");   
	} else if (inputCode.toUpperCase() != code.toUpperCase()) {   
		alert("驗證碼輸入錯誤！");   
		createCode();
	} else {   
		if (name == "") {
			alert("請輸入用戶名");
			createCode();
		} else if (email == "") {
			alert("請輸入郵箱")
			createCode();
		} else {
			var ok = 0;
			for (i = 1; i < email.length-1; i++) {
				if (email[i] == '@') {
					ok = 1;
					break;
				}
			}
			if (ok == 0) {
				alert("請輸入正確的郵箱");
				createCode();
			} else if (password == "") {
				alert("請輸入密碼");
				createCode();
			} else if (password != cfmKey) {
				alert("兩次輸入的密碼不一致");
				createCode();
			} else {
				$.ajax({
					type: "POST",
					url: "UserRegister",
					data: $('#Signup-form').serialize(),
					dataType: "text",
					complete: function(){
						alert("com");
					},
					success: function(message){
						alert("llll");
						if(message == "failure"){
							alert("註冊失敗，請更改用戶名");
						}else{
							alert("註冊成功！");
							window.location.href="login.jsp";
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown){
						alert(XMLHttpRequest.status);
						alert(XMLHttpRequest.readyState);
						alert(textStatus);
					}
				});
			}
		}

	}   
}

上面的js代碼可以看到，通過ajax跳轉到servlet後無論怎麼樣都應該會有alert彈窗，至少complete會有吧。

但是一點反應也沒有。。

關鍵是數據庫存了內容，dopost最後一句語句也執行了（system.out輸出）

最後發現我在提交表單後執行js的時候如果有其他問題沒有提交表格，表格會自動刷新！！！而我沒有做任何跳轉啊。。

 

解決方案

把button改成了a，就沒有這個bug 了

 

特別神奇。。。猜測是表格中的button有特殊的作用，內嵌在html裏的事件一類的？？？