情景还原:
执行ajax请求来提交表单,查看google开发者工具的网络,显示该请求为红色的,且status为canceled。但是后台却接受了参数并且执行成功。
html代码:
表单代码:
<form class="loginForm-div" id="loginFormInfo" method="post" enctype="multipart/form-data">
<div class="form-group form-name">
<label>用户登录</label>
</div>
<div class="form-group">
<input id="uid" type="text" placeholder="请输入登录账号" class="myform-control-lg" required ng-minlength="1">
</div>
<div class="form-group">
<input id="pwd" type="password" placeholder="请输入登录密码" class="myform-control-lg" required ng-minlength="1">
</div>
<div>
<a class="forgetPwd" href="#">忘记密码?</a>
</div>
<!-- 提交按钮,注意这里的type是button哦!!这是为了适应火狐浏览器,而且也因为ajax不能和submit同时存在-->
<div>
<button class="loginSubmit-btn" type="button" class="btn btn-secondary btn-lg" ng-disabled="loginFormInfo.$invalid,validate()" onclick="validate()">立即登录</button>
</div>
</form>
js代码(错误的):
/*验证码校验*/
function validate(){
if(验证成功){
$('#loginFormInfo').submit(function();//注意!!!!!!!!!!!!!这里错了!!!!
}
}
//ajax方式提交表单
$('#loginFormInfo').submit(function(){
var uid = $('#uid').val();
var pwd = $('#pwd').val();
$.ajax({
type: "get",
url: xxx,
success: function (result, status, xhr) {
if (xhr.getResponseHeader("EntityClass") == "UserInfo"){
alert("登录成功!");
window.location.href = './index.html';
}else {
alert("用户名或密码错误!");
cleanForm();
}
},
error: function(response) {
alert("登录失败!服务器内部错误");
cleanForm();
}
});
});
改正之后的js代码:
/*验证码校验*/
function validate(){
if(验证成功){
submitLoginForm();
}
}
//将原来的submit表单的方法换掉
function submitLoginForm(){
var uid = $('#uid').val();
var pwd = $('#pwd').val();
$.ajax({
type: "get",
// async: false, 这个如果加上,可能status不是canceled了,但是会导致下面的success无法跳转
url: "./CXF/REST/Domain/doLogin/"+uid+"/"+pwd,
success: function (result, status, xhr) {
if (xhr.getResponseHeader("EntityClass") == "UserInfo"){
alert("登录成功!");
window.location.href = './index.html';
}else {
alert("用户名或密码错误!");
cleanForm();
}
},
error: function(response) {
alert("登录失败!服务器内部错误");
cleanForm();
}
});
}
原因:
因为from action事件与绑定与submit按钮上的click事件同时触发。
小结
1.在URL变更后,会对当前正在执行的ajax进求进行中止操作
2.在使用到ajax的时候,尽量不要在form内使用submit进行提交