视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
jQuery中ajax错误调试分析
2020-11-27 20:30:25 责编:小采
文档


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的错误状态码,其实都是后端发送过来的。

以上是个人开发过程中遇到的问题及处理总结,若有不正之处,望提出指正,万分感激!

下载本文
显示全文
专题