百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

全局ajax事件 + 全局事件loading设置方法+实例

qiyuwang 2024-10-21 09:39 11 浏览 0 评论

jquery的ajax方法的全部全局事件(6个):
    ajaxStart:ajax请求开始前
    ajaxSend:ajax请求时
    ajaxSuccess:ajax获取数据后
    ajaxError:ajax请求发生错误后
    ajaxComplete:ajax请求完成时
    ajaxStop:ajax请求停止后 
  不使用全局事件的做法是:给单个ajax加一个global:false

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;
  });

相关推荐

基于Docker方式安装与部署Camunda流程引擎

1Camunda简介官网:https://docs.camunda.org/manual/7.19/installation/docker/Camunda是一个轻量级、开源且高度灵活的工作流和决策自...

宝塔Linux面板如何部署Java项目?(宝塔面板 linux)

通过宝塔面板部署Java还是很方便的,至少不需要自己输入tomcat之类的安装命令了。在部署java项目前,我还是先说下目前的系统环境,如果和我的系统环境不一样,导致部署不成功,那你可能需要去找其他资...

浪潮服务器如何用IPMI安装Linux系统

【注意事项】此处以浪潮服务器为例进行演示所需使用的软件:Chrome浏览器个人PC中需要预先安装java,推荐使用jdk-8u181-windows-x64.exe【操作步骤】1、在服务器的BIOS中...

Centos7环境Hadoop3集群搭建(hadoop集群环境搭建实验报告)

由于项目需要存储历史业务数据,经过评估数据量会达到100亿以上,在原有mongodb集群和ES集群基础上,需要搭建Hbase集群进行调研,所以首先总结一下Hadoop集群的搭建过程。一、三个节点的集群...

Hadoop高可用集群搭建及API调用(hadoop高可用原理)

NameNodeHA背景在Hadoop1中NameNode存在一个单点故障问题,如果NameNode所在的机器发生故障,整个集群就将不可用(Hadoop1中虽然有个SecorndaryNameNo...

使用Wordpress搭建一个属于自己的网站

现在开源的博客很多,但是考虑到wordpress对网站的seo做的很好,插件也多。并且全世界流量排名前1000万的网站有33.4%是用Wordpress搭建的!所以尝试用Wordpress搭建一个网站...

Centos 安装 Jenkins(centos 安装ssh)

1、Java安装查看系统是否已安装Javayumlistinstalled|grepjava...

Java教程:gitlab-使用入门(java中的git)

1导读本教程主要讲解了GitLab在项目的环境搭建和基本的使用,可以帮助大家在企业中能够自主搭建GitLab服务,并且可以GitLab中的组、权限、项目自主操作...

Dockerfile部署Java项目(docker部署java应用)

1、概述本文主要会简单介绍什么是Docker,什么是Dockerfile,如何安装Docker,Dockerfile如何编写,如何通过Dockerfile安装jar包并外置yaml文件以及如何通过do...

如何在Eclipse中搭建Zabbix源码的调试和开发环境

Zabbix是一款非常优秀的企业级软件,被设计用于对数万台服务器、虚拟机和网络设备的数百万个监控项进行实时监控。Zabbix是开放源码和免费的,这就意味着当出现bug时,我们可以很方便地通过调试源码来...

Java路径-02-Java环境配置(java环境搭建及配置教程)

1Window环境配置1.1下载...

35.Centos中安装python和web.py框架

文章目录前言1.Centos7python:2.Centos8python:3.进行下载web.py框架然后应用:4.安装好之后进行验证:5.总结:前言...

《我的世界》服务器搭建(我的世界服务器如何搭建)

1.CentOS7环境1.1更改YUM源#下载YUM源文件curl-o/etc/yum.repos.d/CentOS-Base.repohttps://mirrors.aliyun.com...

CentOS 7 升级 GCC 版本(centos7.4升级7.5)

1.GCC工具介绍GCC编译器:...

Linux安装Nginx详细教程(linux安装配置nginx)

环境准备1.因为Nginx依赖于gcc的编译环境,所以,需要安装编译环境来使Nginx能够编译起来。命令:yuminstallgcc-c++显示完毕,表示安装完成:2.Nginx的http模块需要...

取消回复欢迎 发表评论: