这是一个项目中遇到的一个很莫名的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="you@example.com">
</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里的事件一类的???