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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
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
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
简述Python中的进程、线程、协程
2016/03/18 Python
python采集微信公众号文章
2018/12/20 Python
Python使用folium excel绘制point
2019/01/03 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python配置文件写入过程详解
2019/10/19 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
文明礼仪小标兵事迹
2014/01/12 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
爱护公共设施标语
2014/06/24 职场文书
2014年节能工作总结
2014/12/18 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2016年公司新年寄语
2015/08/17 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript