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

来源：互联网发布：量化数据分析炒股软件编辑：程序博客网时间：2024/05/16 18:00

在与后台交互的时候，经常使用到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" 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>

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

1 0