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

本文轉載自查看原文 2016-09-18 16:41 6923

在與后台交互的時候，經常使用到jquery的$.ajax()方法來請求數據；

回調函數用的比較多的是success，但是complete、beforeSend、error函數也是很有用的；

下面是使用例子小結：

html代碼：

[html] view plain copy

<!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代碼：

[javascript] view plain copy

<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>

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 $.ajax({})方法中的回調函數beforeSend，success，complete，error使用示例 jQuery.ajax中success 和complete 區別以及ajax參數解釋 jquery.ajax之beforeSend方法使用介紹 ajax的beforeSend的使用 jQuery.ajax中success 和complete 區別 jquery中ajax發送請求時關於beforesend和complete的用法 jquery ajax complete 方法 $.ajax()中的success和error的使用注意事項 ajax中的success函數及error函數中使用 $(this)不生效的原因 jquery ajax中success與complete的執行順序 (轉)