jQuery之ajax错误调试分析

曾经终败给现在 2022-07-14 12:12 218阅读 0赞

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,第二种在谷歌浏览器（其他浏览器也可以）F12下NetWork查看。这时候看到的信息是 5\{“status”：“success”\}  。不难看出，这个文本中包含了一个json对象的数据，但是不是一个完整json数据。错误发现了，直接去php文件修改相应信息，把多余的打印去除。解决问题。 另外，一个不合格的json对象数据也会导致该问题。例如\{'status':'success'\}数据中是单引号。

**案例2**问题：前端使用jQuery框架，用到ajax与后端交互，然后让后端操作数据库，后端是nodejs。发现ajax无响应，没有走进success的回调函数，也没有走进error的回调函数。

处理：　　首先检查功能有没有实现，发现后端其实是做了处理，数据库已经完成相关修改操作。那问题就很清楚了，后端处理完以后没有给前端响应。在后端处理完后加上相关响应代码即可解决，由此可知，ajax的错误状态码，其实都是后端发送过来的。