jQuery中ajax错误调试分析


Posted in Javascript onDecember 01, 2016

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

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

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
JQuery学习总结【二】
Dec 01 #Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 #Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 #Javascript
Vue方法与事件处理器详解
Dec 01 #Javascript
简单理解vue中实例属性vm.$els
Dec 01 #Javascript
jsp 自动编译机制详细介绍
Dec 01 #Javascript
基于vue.js实现图片轮播效果
Dec 01 #Javascript
You might like
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
浅谈php命令行用法
2015/02/04 PHP
初识laravel5
2015/03/02 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
js实现漫天星星效果
2017/01/19 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
python 列表删除所有指定元素的方法
2018/04/19 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
描述RIP和OSPF区别以及特点
2015/01/17 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
协议书的格式
2014/04/23 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
会计学习心得体会
2014/09/09 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
西游记读书笔记
2015/06/25 职场文书
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang