jquery的ajax方法的全部全局事件(6个):
ajaxStart:ajax请求开始前
ajaxSend:ajax请求时
ajaxSuccess:ajax获取数据后
ajaxError:ajax请求发生错误后
ajaxComplete:ajax请求完成时
ajaxStop:ajax请求停止后
不使用全局事件的做法是:给单个ajax加一个global:false
$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
console.log('ajax请求之前')
},
complete: function () {
//ajax请求完成,不管成功失败
console.log('ajax请求完成,不管成功失败')
},
error: function () {
//ajax请求失败
console.log('ajax请求失败')
}
});
// 天气预报
$(document).off('click','.js-request-weather').on('click','.js-request-weather',function(){
$.ajax({
url:'https://api.apiopen.top/getWangYiNews?page=1&count=5',
type:'post',
dataType: "jsonp",//预期服务器返回的数据类型
beforeSend:function(XMLHttpRequest){
//beforeSend中如果返回false可以取消本次Ajax请求
this;//调用本次Ajax请求时传递的options参数
console.log('执行我这个beforeSend,因为我的优先级高(优先级覆盖)')
},
success:function(r){
console.log('接口请求成功啦~')
},
})
})
$(document).bind("ajaxSend", function () {
PageLoading();//显示loading的方法
}).bind("ajaxComplete", function () {
RemoveLoading();//关闭loading的方法
});
// 天气预报
$(document).off('click','.js-request-weather').on('click','.js-request-weather',function(){
$.ajax({
url:'https://api.apiopen.top/getWangYiNews?page=1&count=5',
type:'post',
global:false,//默认时true 表示是否触发全局Ajax事件。设置false将不会触发全局Ajax事件
beforeSend: function () {
console.log('执行我这个beforeSend,因为我的优先级高(优先级覆盖)')
}, //如果没有关闭上面的全局loading,则2者(beforeSend和ajaxSend方法)均会执行。
success : function(data){
$.each(data.items, function( i,item ){
$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
if ( i == 3 ) {
return false;
}
});
}
})
})
实例:
<a href="javascript:;" class="js-apply-btn" action-url="/luola/ajaxce"
action-data='{"team_id":"<?=$teamInfo['team_id']?>"}'
id="cancelApplyBtn" action-msg="取消">取消报名</a>
$('#cancelRegisterBtn').off('click').on('click',function(){
var $t = $(this);
var payExceed=$t.attr('action-exceed');
url = $t.attr('action-url');
param = $.parseJSON(postData)
$promptMessageBox.addClass('show');
$popPromptMask.addClass('show');
$promptConfirmBtn.off('click').on('click',function(){
var $self = $(this);
if($self.attr('data_lock')){
return false;
}
$self.attr('data_lock',1).addClass('disable');
$.ajax({
url : url,
type : 'post',
data : param,
dataType : 'json',
success : function(r){
if(r.code == 0){
window.location.reload();
}else{
ajax_message(r.message,true);
setTimeout(function(){
$ajaxMessageBox.removeClass('show');
},1000);
}
},
error : function(){
ajax_message(errorHtml,true);
setTimeout(function(){
$ajaxMessageBox.removeClass('show');
},1000);
},
complete:function(){
$self.removeAttr('data_lock').removeClass('disable');
}
});
});
return false;
});