一次偶然的ajax請求導致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進行提交，這些特殊的標籤在特定的情況下往往會有讓你迷茫的時候。