jQuery之ajax错误调试分析
jQuery中把ajax封裝得非常好。但是日常開發(fā)中,我偶爾還是會遇到ajax報錯。這里簡單分析一下ajax報錯
一般的jQuery用法如下,ajax通過post方式提交"湯姆和老鼠"這段數(shù)據(jù)到xxx.php文件中。成功后則打印返回的數(shù)據(jù),失敗則打印錯誤原因。
$.ajax({url:"xxx.php",type:"post",datatype:"json",data:{"cat":"tom","mouse":"jack"},success:function(data){console.log(data);},error:function(jqXHR,textStatus,errorThrown){console.log(jqXHR.);
console.log(textStatus);
console.log(errorThrown);
} });
根據(jù)jQuery官方文檔,ajax中error有三個參數(shù),分別是?jqXHR,textStatus,errorThrown。
而jqXHR中也有四個屬性,
1.readyState :當(dāng)前狀態(tài),0-未初始化,1-正在載入,2-已經(jīng)載入,3-數(shù)據(jù)進行交互,4-完成。
2.status ?:返回的HTTP狀態(tài)碼,比如常見的404,500等錯誤代碼。
3.statusText :對應(yīng)狀態(tài)碼的錯誤信息,比如404錯誤信息是not found,500是Internal Server Error。
4.responseText :服務(wù)器響應(yīng)返回的文本信息
textStatus和errorThrown都是字符串類型,分別是返回的狀態(tài)和服務(wù)器的錯誤信息。
一般情況下,ajax走進error的函數(shù)里,把textStatus和jqXHR.readyState打印出來,大概就知道為什么ajax報錯了。如果還是不清楚的話,就把所有參數(shù)都打印出來。
這里總結(jié)一下ajax錯誤遇到的情況,以后遇到新的特殊情況再補充。
案例1?問題:前端使用jQuery框架,用到ajax與后端交互,后端是php+mysql。發(fā)現(xiàn)ajax報錯(ajax采用post類型,json格式,請求數(shù)據(jù)為Json對象),打印textStatus是“parsererror”,意為解析錯誤。
處理: ? ? ? 這個打印說明ajax已經(jīng)與后端(服務(wù)器端)交互成功,后端響應(yīng)并返回了文本信息。但是前端接受到這個文本后解析錯誤。這時候我首先需要看到后端響應(yīng)的文本信息。有兩種方式,一種是打印jqXHR.responseText,第二種在谷歌瀏覽器(其他瀏覽器也可以)F12下NetWork查看。這時候看到的信息是 5{“status”:“success”} ?。不難看出,這個文本中包含了一個json對象的數(shù)據(jù),但是不是一個完整json數(shù)據(jù)。錯誤發(fā)現(xiàn)了,直接去php文件修改相應(yīng)信息,把多余的打印去除。解決問題。 另外,一個不合格的json對象數(shù)據(jù)也會導(dǎo)致該問題。例如{'status':'success'}數(shù)據(jù)中是單引號。
?
案例2問題:前端使用jQuery框架,用到ajax與后端交互,然后讓后端操作數(shù)據(jù)庫,后端是nodejs。發(fā)現(xiàn)ajax無響應(yīng),沒有走進success的回調(diào)函數(shù),也沒有走進error的回調(diào)函數(shù)。
處理: 首先檢查功能有沒有實現(xiàn),發(fā)現(xiàn)后端其實是做了處理,數(shù)據(jù)庫已經(jīng)完成相關(guān)修改操作。那問題就很清楚了,后端處理完以后沒有給前端響應(yīng)。在后端處理完后加上相關(guān)響應(yīng)代碼即可解決,由此可知,ajax的錯誤狀態(tài)碼,其實都是后端發(fā)送過來的。
?
以上是個人開發(fā)過程中遇到的問題及處理總結(jié),若有不正之處,望提出指正,萬分感激!
?
轉(zhuǎn)載于:https://www.cnblogs.com/BillyQin/p/6101539.html
總結(jié)
以上是生活随笔為你收集整理的jQuery之ajax错误调试分析的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Ubuntu下将dash装换成bash
- 下一篇: 深入浅出-iOS程序性能优化