jQuery中ajax錯誤調試分析_jquery

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){<br> console.log(jqXHR.);<br> console.log(textStatus);<br> console.log(errorThrown);<br> }});

根據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,第二種在Google瀏覽器（其他瀏覽器也可以）F12下NetWork查看。這時候看到的資訊是 5{“status”：“success”}  。不難看出，這個文本中包含了一個json對象的資料，但是不是一個完整json資料。錯誤發現了，直接去php檔案修改相應資訊，把多餘的列印去除。解決問題。 另外，一個不合格的json對象資料也會導致該問題。例如{'status':'success'}資料中是單引號。

案例2

問題：前端使用jQuery架構，用到ajax與後端互動，然後讓後端操作資料庫，後端是nodejs。發現ajax無響應，沒有走進success的回呼函數，也沒有走進error的回呼函數。

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

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

以上就是本文的全部內容，希望對大家有所協助，同時也希望多多支援雲棲社區！