AJAX：success，error，complete，beforeSend使用例子及解释

最新推荐文章于 2024-07-15 22:52:27 发布

千寻～

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量8.7k

点赞数 1

分类专栏：前端相关知识文章标签： AJAX success error complete beforeSend

本文链接：https://blog.csdn.net/u011630575/article/details/55505360

版权

前端相关知识专栏收录该内容

32 篇文章 2 订阅

订阅专栏

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

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

beforeSend 该函数用于发送请求前修改XMLHttpRequest对象。其中参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件。

complete　该函数用于请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，该函数有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串。

success　该函数用于请求成功后调用的回调函数，该函数有三个参数。第一个是XMLHttpRequest对象，第二个是strError，第三个是捕捉到的错误对象strObject

error　该函数用于请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject。

下面是使用例子小结：

html代码：

<!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, textStatus, errorThrown) {   
    //textStatus的值：null, timeout, error, abort, parsererror   
    //errorThrown的值：收到http出错文本，如 Not Found 或 Internal Server Error.   
}   
*/  
}  
</script>