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

当前位置：网站建设 > 技术支持

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

资料来源：网络整理时间：2023/2/14 0:36:19 共计：3572 浏览

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

[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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：mui下拉加载、上拉刷新(包括分页，vue.js) | ·下一条：css实现遮罩层，父div透明，子div不透明