學(xué)習(xí)好文章
如圖所示，這只是一個(gè)很簡(jiǎn)單的登錄請(qǐng)求。 
剛看到這個(gè)請(qǐng)求返回狀態(tài)時(shí)，也是覺(jué)著很詫異。經(jīng)過(guò)確認(rèn)參數(shù)等情況，發(fā)現(xiàn)并沒(méi)有什么異常，且進(jìn)行第二次登錄操作時(shí)會(huì)返回正常。
排查思路:
發(fā)現(xiàn)url在第一次登錄操作后由原來(lái)的 [*/login.html]更改為[*/login.html?email=123%40QQ.com&passWord=123123]。
這是一個(gè)很明顯的get請(qǐng)求方式，而login操作請(qǐng)求是由DOM節(jié)點(diǎn)$(‘#login-action’)通過(guò)post方式實(shí)現(xiàn)的。
可以肯定的是，有個(gè)操作將post請(qǐng)求干擾了。分析排查后發(fā)現(xiàn)是由于form標(biāo)簽導(dǎo)致的。
場(chǎng)景再現(xiàn)：
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-JS:$('#login-action').bind('click', function(){ $.post('/login/loguser', function(){ //具體的執(zhí)行.... });});至于原因:
僅僅是由于之前為了在輸入賬號(hào)時(shí)讓瀏覽器進(jìn)行自動(dòng)補(bǔ)全，而將原先的div更換為了form,而不巧的是之前的登錄事件源使用的是button。
而至于為什么status = canceled,是由于在提交時(shí)，form action與綁定于button上的click事件會(huì)同時(shí)觸發(fā)。form action將表單內(nèi)容以serach的形式追加至當(dāng)前url上，url變更后會(huì)導(dǎo)致頁(yè)面重新加載， 而這正是導(dǎo)致post請(qǐng)求在執(zhí)行后就被終止的原因。
總結(jié)：
1.在URL變更后，會(huì)對(duì)當(dāng)前正在執(zhí)行的Ajax進(jìn)求進(jìn)行中止操作。中止后該請(qǐng)求的狀態(tài)碼將為canceled 2.在使用到ajax的時(shí)候，盡量不要在form內(nèi)使用button進(jìn)行提交，這些特殊的標(biāo)簽在特定的情況下往往會(huì)有讓你迷茫的時(shí)候。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
