全局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模块需要...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 基于Docker方式安装与部署Camunda流程引擎
- 宝塔Linux面板如何部署Java项目?(宝塔面板 linux)
- 浪潮服务器如何用IPMI安装Linux系统
- Centos7环境Hadoop3集群搭建(hadoop集群环境搭建实验报告)
- Hadoop高可用集群搭建及API调用(hadoop高可用原理)
- 使用Wordpress搭建一个属于自己的网站
- Centos 安装 Jenkins(centos 安装ssh)
- Java教程:gitlab-使用入门(java中的git)
- Dockerfile部署Java项目(docker部署java应用)
- 如何在Eclipse中搭建Zabbix源码的调试和开发环境
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)