jQuery中把a(bǔ)jax封裝得非常好。但是日常開(kāi)發(fā)中，我偶爾還是會(huì)遇到ajax報(bào)錯(cuò)。這里簡(jiǎn)單分析一下ajax報(bào)錯(cuò)

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

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

根據(jù)jQuery官方文檔，ajax中error有三個(gè)參數(shù)，分別是 jqXHR,textStatus,errorThrown。

而jqXHR中也有四個(gè)屬性，

1.readyState :當(dāng)前狀態(tài),0-未初始化，1-正在載入，2-已經(jīng)載入，3-數(shù)據(jù)進(jìn)行交互，4-完成。

2.status  ：返回的HTTP狀態(tài)碼，比如常見(jiàn)的404,500等錯(cuò)誤代碼。

3.statusText ：對(duì)應(yīng)狀態(tài)碼的錯(cuò)誤信息，比如404錯(cuò)誤信息是not found,500是Internal Server Error。

4.responseText ：服務(wù)器響應(yīng)返回的文本信息

textStatus和errorThrown都是字符串類(lèi)型，分別是返回的狀態(tài)和服務(wù)器的錯(cuò)誤信息。

一般情況下，ajax走進(jìn)error的函數(shù)里，把textStatus和jqXHR.readyState打印出來(lái)，大概就知道為什么ajax報(bào)錯(cuò)了。如果還是不清楚的話(huà)，就把所有參數(shù)都打印出來(lái)。

這里總結(jié)一下ajax錯(cuò)誤遇到的情況，以后遇到新的特殊情況再補(bǔ)充。

案例1

問(wèn)題：前端使用jQuery框架，用到ajax與后端交互，后端是php+mysql。發(fā)現(xiàn)ajax報(bào)錯(cuò)（ajax采用post類(lèi)型，json格式，請(qǐng)求數(shù)據(jù)為Json對(duì)象），打印textStatus是“parsererror”，意為解析錯(cuò)誤。

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

案例2

問(wèn)題：前端使用jQuery框架，用到ajax與后端交互，然后讓后端操作數(shù)據(jù)庫(kù)，后端是nodejs。發(fā)現(xiàn)ajax無(wú)響應(yīng)，沒(méi)有走進(jìn)success的回調(diào)函數(shù)，也沒(méi)有走進(jìn)error的回調(diào)函數(shù)。

處理：首先檢查功能有沒(méi)有實(shí)現(xiàn)，發(fā)現(xiàn)后端其實(shí)是做了處理，數(shù)據(jù)庫(kù)已經(jīng)完成相關(guān)修改操作。那問(wèn)題就很清楚了，后端處理完以后沒(méi)有給前端響應(yīng)。在后端處理完后加上相關(guān)響應(yīng)代碼即可解決，由此可知，ajax的錯(cuò)誤狀態(tài)碼，其實(shí)都是后端發(fā)送過(guò)來(lái)的。

 以上是個(gè)人開(kāi)發(fā)過(guò)程中遇到的問(wèn)題及處理總結(jié)，若有不正之處，望提出指正，萬(wàn)分感激！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！

最新評(píng)論