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

最新推荐文章于 2024-06-20 16:11:11 发布

十年树木_2015

最新推荐文章于 2024-06-20 16:11:11 发布

阅读量4.8w

点赞数 6

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_30337695/article/details/51373727

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

下面是使用例子小结：

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" οnclick="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>

关于ajax的开始的一些参数，cache，contentType等等，自己查下看看就明白了。

十年树木_2015

关注

6
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
$.ajax({})方法success，error，complete，beforeSend使用例子及解释

在与后台交互的时候，经常使用到jquery的$.ajax()方法来请求数据；回调函数用的比较多的是success，但是complete、beforeSend、error函数也是很有用的；下面是使用例子小结：html代码：ajax_demo.display{ width:600px; height: 400px; border:1px solid
复制链接

扫一扫

专栏目录