jQuery之ajax錯誤調試分析


jQuery中把ajax封裝得非常好。但是日常開發中,我偶爾還是會遇到ajax報錯。這里簡單分析一下ajax報錯

一般的jQuery用法如下,ajax通過post方式提交"湯姆和老鼠"這段數據到xxx.php文件中。成功后則打印返回的數據,失敗則打印錯誤原因。

$.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);
} });

根據jQuery官方文檔,ajax中error有三個參數,分別是 jqXHR,textStatus,errorThrown

而jqXHR中也有四個屬性,

1.readyState :當前狀態,0-未初始化,1-正在載入,2-已經載入,3-數據進行交互,4-完成。

2.status  :返回的HTTP狀態碼,比如常見的404,500等錯誤代碼。

3.statusText :對應狀態碼的錯誤信息,比如404錯誤信息是not found,500是Internal Server Error。

4.responseText :服務器響應返回的文本信息

textStatus和errorThrown都是字符串類型,分別是返回的狀態和服務器的錯誤信息。

一般情況下,ajax走進error的函數里,把textStatus和jqXHR.readyState打印出來,大概就知道為什么ajax報錯了。如果還是不清楚的話,就把所有參數都打印出來。

這里總結一下ajax錯誤遇到的情況,以后遇到新的特殊情況再補充。

案例1 問題:前端使用jQuery框架,用到ajax與后端交互,后端是php+mysql。發現ajax報錯(ajax采用post類型,json格式,請求數據為Json對象),打印textStatus是“parsererror”,意為解析錯誤。

處理:       這個打印說明ajax已經與后端(服務器端)交互成功,后端響應並返回了文本信息。但是前端接受到這個文本后解析錯誤。這時候我首先需要看到后端響應的文本信息。有兩種方式,一種是打印jqXHR.responseText,第二種在谷歌瀏覽器(其他瀏覽器也可以)F12下NetWork查看。這時候看到的信息是 5{“status”:“success”}  。不難看出,這個文本中包含了一個json對象的數據,但是不是一個完整json數據。錯誤發現了,直接去php文件修改相應信息,把多余的打印去除。解決問題。 另外,一個不合格的json對象數據也會導致該問題。例如{'status':'success'}數據中是單引號。

 

案例2問題:前端使用jQuery框架,用到ajax與后端交互,然后讓后端操作數據庫,后端是nodejs。發現ajax無響應,沒有走進success的回調函數,也沒有走進error的回調函數。

處理:  首先檢查功能有沒有實現,發現后端其實是做了處理,數據庫已經完成相關修改操作。那問題就很清楚了,后端處理完以后沒有給前端響應。在后端處理完后加上相關響應代碼即可解決,由此可知,ajax的錯誤狀態碼,其實都是后端發送過來的。

 


以上是個人開發過程中遇到的問題及處理總結,若有不正之處,望提出指正,萬分感激!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM