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的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 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 中的输出缓冲
2006/12/21 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
Javascript typeof 用法
2008/12/28 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js实现文字滚动效果
2016/03/03 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
jQuery事件详解
2017/02/23 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
C#笔试题集合
2013/06/21 面试题
遇到的Mysql的面试题
2014/06/29 面试题
大学生村官心得体会范文
2014/01/04 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL