$.ajax({})方法success，error，complete，beforeSend使用例子及解释

在与后台交互的时候，经常使用到jquery的$.ajax()方法来请求数据；

回调函数用的比较多的是success，但是complete、beforeSend、error函数也是很有用的；

下面是使用例子小结：

html代码：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>ajax_demo</title>  
  6. </head>  
  7. <style>  
  8. .display{  
  9.     width:600px;  
  10.     height: 400px;  
  11.     border:1px solid;  
  12. }  
  13. </style>  
  14. <body>  
  15. <div class="box">展示数据区域:</div>  
  16. <div class="display"/></div>  
  17. <input type="button" value="点击获取数据" id="inp" onclick="getData()"/>  
  18. <script type="text/javascript" src="jquery.min.js"></script>  
  19. <script type="text/javascript" src="bootstrap.min.js"></script>  
  20. <script type="text/javascript">  

js代码：

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2. function getData(){  
  3.   
  4.     $.ajax({  
  5.         url:'http://192.168.31.227/sfytjjk/wdaj/wdla.php',  
  6.         type:"post",  
  7.         timeout:5000,  
  8.         async:true,  
  9.         cache:true,  
  10.         data:"user_id=12&page=0",  
  11.         dataType:"json",  
  12.         contentType:"application/x-www-form-urlencoded",  
  13.         beforeSend:function(XMLHttpRequest){  
  14.             console.log(this);  
  15.             $("#inp").val("正在获取数据...");   
  16.         },  
  17.         success:function(data){  
  18.             console.log(data);  
  19.             $(".display").html("获取到的数据:</br>");  
  20.             $(".display").append("总条数:"+data.data.all_count);  
  21.             $("#inp").val("点击获取数据");   
  22.         },  
  23.         complete:function(XMLHttpRequest,textStatus){  
  24.             if(textStatus=='timeout'){  
  25.                 var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");  
  26.                 xmlhttp.abort();   
  27.                 $(".box").html("网络超时！");  
  28.     　　　　}  
  29.             $("#inp").val("点击获取数据");   
  30.         },  
  31.         error:function(XMLHttpRequest, textStatus){  
  32.             console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState  
  33.             console.log(textStatus);  
  34.             $(".box").html("服务器错误！");  
  35.         }  
  36.     });  
  37.   
  38. /*  
  39. 通过捕捉error事件来获取出错的信息: 
  40. error: function(XMLHttpRequest, textStatus, errorThrown) { 
  41.  alert(XMLHttpRequest.status); 
  42.  alert(XMLHttpRequest.readyState); 
  43.  alert(textStatus); 
  44. } 
  45.  
  46. XMLHttpRequest.readyState: 状态码的意思 
  47. 0 － （未初始化）还没有调用send()方法 
  48. 1 － （载入）已调用send()方法，正在发送请求 
  49. 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容 
  50. 3 － （交互）正在解析响应内容 
  51. 4 － （完成）响应内容解析完成，可以在客户端调用了 
  52.  
  53. status:返回的HTTP状态码，比如常见的404,500等错误代码。 
  54. statusText:对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。 
  55. responseText ：服务器响应返回的文本信息 
  56.  
  57. complete: function (XMLHttpRequest, textStatus) {   
  58.     //textStatus的值：success,notmodified,nocontent,error,timeout,abort,parsererror   
  59. },   
  60. error: function (XMLHttpRequest, textStatus, errorThrown) {   
  61.     //textStatus的值：null, timeout, error, abort, parsererror   
  62.     //errorThrown的值：收到http出错文本，如 Not Found 或 Internal Server Error.   
  63. }   
  64. */  
  65. }  
  66. </script>

原文链接：http://blog.csdn.net/qq_30337695/article/details/51373727

posted @ 2016-09-18 16:41  Fire_Dragon  阅读(9005)  评论(0)  编辑  收藏  举报