【前端】ajax请求的status为canceled，导致表单无法提交

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/diyinqian/article/details/82083820

情景还原：

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

参考：

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