一次偶然的ajax请求导致status为canceled的原因

status,canceled

拭目以待 发布于

如图所示,这只是一个很简单的登录请求。

刚看到这个请求返回状态时,也是觉着很诧异。经过确认参数等情况,发现并没有什么异常,且进行第二次登录操作时会返回正常。


排查思路:

发现url在第一次登录操作后由原来的 [****/login.html]更改为[****/login.html?email=123%40qq.com&password=123123]。

这是一个很明显的get请求方式,而login操作请求是由DOM节点$('#login-action')通过post方式实现的。

可以肯定的是,有个操作将post请求干扰了。分析排查后发现是由于form标签导致的。


场景再现:

HTML:

<form class="login-area well">  
    <header class="login-title">loveJavascript</header>
    <div class="form-group col-sm-12">
        <label class="control-label col-sm-2">email:</label>
        <input type="text" class="form-control col-sm-8" name="email"/>
    </div>
    <div class="form-group col-sm-12">
        <label class="control-label col-sm-2">password:</label>
        <input type="password" class="form-control col-sm-8" name="password"/>
    </div>
    <div class="form-group text-center">
        <button class="btn btn-primary" id="login-action">login</button>
    </div>
</form>


JS:

$('#login-action').bind('click', function(){
    $.post('/login/loguser', function(){
        //具体的执行....
    });
});


至于原因:

仅仅是由于之前为了在输入账号时让浏览器进行自动补全,而将原先的div更换为了form,而不巧的是之前的登录事件源使用的是button

而至于为什么status = canceled,是由于在提交时,form action与绑定于button上的click事件会同时触发。form action将表单内容以serach的形式追加至当前url上,url变更后会导致页面重新加载, 而这正是导致post请求在执行后就被终止的原因。


总结:


1.在URL变更后,会对当前正在执行的ajax进求进行中止操作。中止后该请求的状态码将为canceled

2.在使用到ajax的时候,尽量不要在form内使用button进行提交,这些特殊的标签在特定的情况下往往会有让你迷茫的时候。