• $.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.     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. XMLHttpRequest.readyState: 状态码的意思 
    46. 0 - (未初始化)还没有调用send()方法 
    47. 1 - (载入)已调用send()方法,正在发送请求 
    48. 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 
    49. 3 - (交互)正在解析响应内容 
    50. 4 - (完成)响应内容解析完成,可以在客户端调用了 
    51.  
    52. status:返回的HTTP状态码,比如常见的404,500等错误代码。 
    53. statusText:对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。 
    54. responseText :服务器响应返回的文本信息 
    55.  
    56. complete: function (XMLHttpRequest, textStatus) {   
    57.     //textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror   
    58. },   
    59. error: function (XMLHttpRequest, textStatus, errorThrown) {   
    60.     //textStatus的值:null, timeout, error, abort, parsererror   
    61.     //errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error.   
    62. }   
    63. */  
    64. }  
    65. </script>

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

  • 相关阅读:
    MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用
    MVC5+EF6 入门完整教程十
    MVC5+EF6 入门完整教程九
    MVC5+EF6 入门完整教程八
    MVC5+EF6 入门完整教程七
    MVC5+EF6 入门完整教程六
    MVC5+EF6 入门完整教程五
    MVC5+EF6 入门完整教程四
    MVC5 + EF6 完整入门教程三
    从前端的UI开始
  • 原文地址:https://www.cnblogs.com/fire-dragon/p/5882144.html
Copyright © 2020-2023  润新知