全局ajax事件+全局事件loading设置讲解
https://www.flypeng.com win10系统 发布时间:2023-04-24 09:31 来源:未知
jquery的ajax方法的全部全局事件(6个):
    ajaxStart:ajax请求开始前
    ajaxSend:ajax请求时
    ajaxSuccess:ajax获取数据后
    ajaxError:ajax请求发生错误后
    ajaxComplete:ajax请求完成时
    ajaxStop:ajax请求停止后 
  不使用全局事件的做法是:给单个ajax加一个globalfalse

ajax全局设置相关:方法1:通过$.ajaxSetup() 函数来全局设置。

$.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('接口请求成功啦~')
        },
    })
})

方法2:ajax 请求全局loading,个别特殊请求不显示loading

$(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;
  });
如果你有好的win10资讯或者win10教程,以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到#qq.com(#替换为@)。期待你的好消息!