情景还原：

执行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><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进行提交

参考：

一次ajax请求导致status为canceled的原因小记

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！