jquery中ajax使用error调试错误的方法

分手后的思念是犯贱 2022-05-25 09:19 169阅读 0赞

*转载*  2015-02-08   作者：whazhl   [ ![text-message.png][] 我要评论][_text-message.png_]

这篇文章主要介绍了jquery中ajax使用error调试错误的方法,实例分析了Ajax的使用方法与error函数调试错误的技巧,需要的朋友可以参考下

本文实例讲述了jquery中ajax使用error调试错误的方法。分享给大家供大家参考。具体分析如下：

JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。

jquery中ajax的常用用法类似于：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>$(document).ready(</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>jQuery(</code> 
      <code>"#clearCac"</code> 
      <code>).click(</code> 
      <code>function</code> 
      <code>() { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>jQuery.ajax({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>url: url,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>type: </code> 
      <code>"post"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>data: { id: </code> 
      <code>'0'</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>dataType: </code> 
      <code>"json"</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>success: </code> 
      <code>function</code> 
      <code>(msg) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>alert(msg);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>error: </code> 
      <code>function</code> 
      <code>(XMLHttpRequest, textStatus, errorThrown) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>alert(XMLHttpRequest.status);</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>alert(XMLHttpRequest.readyState);</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>alert(textStatus);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>complete: </code> 
      <code>function</code> 
      <code>(XMLHttpRequest, textStatus) { </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>this</code> 
      <code>; </code> 
      <code>// 调用本次AJAX请求时传递的options参数</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

当通过ajax异步调用成功时，会调用 success函数 。success函数语法为：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>//请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态</code> 
     </div> 
     <div> 
      <code>function</code> 
      <code>(data, textStatus)</code> 
     </div> 
     <div> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>// data could be xmlDoc, jsonObj, html, text, etc...&nbsp;&nbsp; </code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>this</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>// the options for this ajax request</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

当通过ajax异步调用出错时，会调用 error函数 。error函数语法为：

[?][Link 1]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <code>//(默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。</code> 
     </div> 
     <div> 
      <code>//参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。</code> 
     </div> 
     <div> 
      <code>//如果发生了错误，错误信息（第二个参数）除了得到null之外，</code> 
     </div> 
     <div> 
      <code>//还可能是"timeout", "error", "notmodified" 和 "parsererror"。</code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>//textStatus: "timeout", "error", "notmodified" 和 "parsererror"。</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>error：</code> 
      <code>function</code> 
      <code>(XMLHttpRequest, textStatus, errorThrown) </code> 
     </div> 
     <div> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;</code>&nbsp; 
     </div> 
     <div> 
      <code>} </code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

error事件返回的第一个参数XMLHttpRequest：  
XMLHttpRequest.readyState: 状态码的意思  
0 － （未初始化）还没有调用send()方法  
1 － （载入）已调用send()方法，正在发送请求  
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容  
3 － （交互）正在解析响应内容  
4 － （完成）响应内容解析完成，可以在客户端调用了  
   
发送error可能有下面两张引起的，或者其他程序问题，需要我们认真仔细。  
1、data:"\{\}", data为空也一定要传"\{\}"；不然返回的是xml格式的。并提示parsererror.  
2、parsererror的异常和Header 类型也有关系。及编码header('Content-type: text/html; charset=utf8');

希望本文所述对大家的jQuery程序设计有所帮助。

[text-message.png]: http://www.jb51.net/skin/2018/images/text-message.png
[_text-message.png_]: http://www.jb51.net/article/60881.htm#comments
[Link 1]: http://www.jb51.net/article/60881.htm#