jQuery中ajax错误调试分析_jquery

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

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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, ajax
调试
jquery ajax 调试、jquery ajax错误处理、jquery ajax 500错误、jquery ajax 400错误、jquery ajax 错误信息,以便于您获取更多的相关知识。

时间: 2024-09-17 03:36:09

jQuery中ajax错误调试分析_jquery的相关文章

jQuery中noConflict()用法实例分析_jquery

本文实例讲述了jQuery中noConflict()用法.分享给大家供大家参考.具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突.在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例如,在要用到$("div p")的地方,就必须换成jQuery(&

JQuery中serialize()用法实例分析_jquery

本文实例讲述了JQuery中serialize()用法.分享给大家供大家参考.具体分析如下: 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身.序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中.   语法: $(selector).serialize()   详细说明 1..seria

jquery 中ajax执行的优先级_jquery

今天在做用户注册时:发现了一个奇怪的问题,请看代码: $('input[name="username"]').blur(function(){ //验证格式 var pattern = /^[a-z][\w]{4,11}$/i; if(!pattern.test($(this).val())) { $(this).siblings('.desc').html('<font style="color:red;">5-12个字符,必须以字母开头,只能输入数字

jquery中change()用法实例分析_jquery

本文实例分析了jquery中change()的用法.分享给大家供大家参考.具体分析如下: change()当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素. 当用于 select 元素时,change 事件会在选择某个选项时发生.当用于 text field 或 text area 时,该事件会在元素失去焦点时发生.  一.change的用法 1.触发 change 事件:触发被选元素的 change

jQuery中slideUp()方法用法分析_jquery

本文实例讲述了jQuery中slideUp()方法用法.分享给大家供大家参考.具体分析如下: 此方法通过高度变化(向上减小)来动态地隐藏所有匹配的元素,并且隐藏完成后还可以地触发一个回调函数. slideUp()方法只调整元素的高度,可以使匹配的元素以"滑动"方式隐藏起来. 一.语法结构: 此方法可以规定动画效果持续时间,如果没有规定时间则使用默认值normal.例如: 复制代码 代码如下: $("div").slideUp(5000) 以上代码可以设置动画效果在5

jQuery中DOM操作实例分析_jquery

本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

jQuery中index()的用法分析_jquery

本文实例讲解了jQuery中index()的用法.分享给大家供大家参考之用.具体方法如下: 现在有这样一个问题:如果列表里面有N多的列表项目,我想知道我点击了哪一个应该怎么取呢? 对此,jQuery里面提供了一个index()方法 : index(subject) 该方法搜索与参数表示的对象匹配的元素,并返回相应元素的索引值. 如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1. 但是 API里面提供的例子貌似不对,示例如下: <ul> <li><a hre

Jquery中CSS选择器用法分析_jquery

本文实例讲述了Jquery中CSS选择器用法.分享给大家供大家参考.具体如下: jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElementByTagName 2. ID选择器 用于获取某个具有id属性的元素,格式如下:$("id"),同get

jQuery中animate用法实例分析_jquery

本文实例讲述了jQuery中animate用法.分享给大家供大家参考.具体如下: 这是一个简单的animate函数尝试.代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".side-box h3").toggle(function(){ $(this).addClass("box-arrow"); $(this).next(".sid