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

前端之家收集整理的这篇文章主要介绍了$.ajax({})方法success,error,complete,beforeSend使用例子及解释前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

下面是使用例子小结:

HTML代码

@H_404_8@<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>ajax_demo</title> </head> <style> .display{ width:600px; height: 400px; border:1px solid; } </style> <body> <div class="Box">展示数据区域:</div> <div class="display"/></div> <input type="button" value="点击获取数据" id="inp" onclick="getData()"/> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="bootstrap.min.js"></script> <script type="text/javascript">js代码
<script type="text/javascript">
function getData(){

    $.ajax({
        url:'http://192.168.31.227/sfytjjk/wdaj/wdla.PHP',type:"post",timeout:5000,async:true,cache:true,data:"user_id=12&page=0",dataType:"json",contentType:"application/x-www-form-urlencoded",beforeSend:function(XMLHttpRequest){
            console.log(this);
            $("#inp").val("正在获取数据..."); 
        },success:function(data){
            console.log(data);
            $(".display").html("获取到的数据:</br>");
            $(".display").append("总条数:"+data.data.all_count);
            $("#inp").val("点击获取数据"); 
        },complete:function(XMLHttpRequest,textStatus){
            if(textStatus=='timeout'){
                var xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
                xmlhttp.abort(); 
                $(".Box").html("网络超时!");
        }
            $("#inp").val("点击获取数据"); 
        },error:function(XMLHttpRequest,textStatus){
            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
            console.log(textStatus);
            $(".Box").html("服务器错误!");
        }
    });

/* 
通过捕捉error事件来获取出错的信息:
error: function(XMLHttpRequest,textStatus,errorThrown) {
 alert(XMLHttpRequest.status);
 alert(XMLHttpRequest.readyState);
 alert(textStatus);
}

XMLHttpRequest.readyState: 状态码的意思
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

status:返回的HTTP状态码,比如常见的404,500等错误代码。
statusText:对应状态码的错误信息,比如404错误信息是not found,500是Internal Server Error。
responseText :服务器响应返回的文本信息

complete: function (XMLHttpRequest,textStatus) {  
    //textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror  
},error: function (XMLHttpRequest,errorThrown) {  
    //textStatus的值:null,parsererror  
    //errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error.  
}  
*/
}
</script>
关于ajax的开始的一些参数,cache,contentType等等,自己查下看看就明白了。

猜你在找的Ajax相关文章