您当前的位置： 首页 > 学无止境 > 网站建设 网站首页网站建设
jquery-ajax的全局状态函数与局部状态函数
发布时间：2016-04-03 21:18:39编辑：雪饮阅读（）
Jquery-ajax的ajaxStart与ajaxStop方面模拟局部加载”longing...”效果:
<script type="text/javascript" src="/js/jquery.js"></script>
<style type="text/css">
#loding{
display:none;}
</style>
</head>
<body>
<div id="box"></div>
<input type="button" value="button" id="aa">
<form>
<input name="user_name" type="text" id="user_name"/><br/>
<input name="password" type="text" id="password"/>
</form>
<div id="loding">loding....</div>
<script type="text/javascript">
$(function(){
$("#aa").click(function(){
//ajax方法开始
$.ajax(
{
type:'POST',
url:"test.php",
data:$.param({
user_name:$("#user_name").val(),
password:$("#password").val()
}),
success: function(response,status,xhr){$("#box").html(response)}
}
);
//ajax方法结束
});
$(document).ajaxStart(function(){
$("#loding").show();
}).ajaxStop(function() {
$("#loding").hide();
});
});
</script>
</body>
Jquery-ajax的error参数：可返回ajax请求的错误信息
$("#aa").click(function(){
//ajax方法开始
$.ajax(
{
type:'POST',
url:"test2.php",
data:$.param({
user_name:$("#user_name").val(),
password:$("#password").val()
}),
success: function(response,status,xhr){$("#box").html(response)},
error:function(xhr,errorText,errorType){alert(errorType);}
}
);
//ajax方法结束
});
$(document).ajaxStart(function(){
$("#loding").show();
}).ajaxStop(function() {
$("#loding").hide();
});
Jquery-ajax的全局error方法：
$("#aa").click(function(){
//ajax方法开始
$.ajax(
{
type:'POST',
url:"test2.php",
data:$.param({
user_name:$("#user_name").val(),
password:$("#password").val()
}),
success: function(response,status,xhr){$("#box").html(response)},
error:function(xhr,errorText,errorType){alert(errorType);}
}
);
//ajax方法结束
});
$(document).ajaxError(function(event,xhr,settings,errorType){
alert(errorType);
});
$(document).ajaxStart(function(){
$("#loding").show();
}).ajaxStop(function() {
$("#loding").hide();
});
Jquery-ajax全局状态函数：
$(document).ajaxSend(function(){
alert("发送请求之前执行");
}).ajaxComplete(function(){
alert("请求完成后，不管是否失败成功");
}).ajaxSuccess(function(){
alert("请求成功后");
}).ajaxError(function(){
alert("请求失败后");
});
Jquery-ajax的post下局部状态函数：（请求之前不包含）
//ajax方法开始
$.post("test.php",$("form").serialize()).success(function(){
alert("请求成功后");
}).complete(function(){
alert("请求完成后，不管是否失败成功");
}).error(function(){
alert("请求失败后");
});
//ajax方法结束
});
Jquery-ajax的ajax方法下的局部状态函数：
//ajax方法开始
$.ajax(
{
type:'POST',
url:"test2.php",
data:$.param({
user_name:$("#user_name").val(),
password:$("#password").val()
}),
success: function(){alert("请求成功后");},
complete:function(){alert("请求完成后，不管是否成功失败");},
beforeSend:function(){alert("请求之前");},
error:function(){alert("请求失败后");}
}
);
//ajax方法结束
关键字词：jquery,ajax