ajax提交时“加载中”提示的处理方法
方法1:使用ajaxStart方法定义一个全局的“加载中。。。”提示
$(function(){
$("#loading").ajaxStart(function(){
$(this).html.("<img src='/jqueryStu/images/loading.gif' />");
});
$("#loading").ajaxSuccess(function(){
$(this).html.("");
// $(this).empty(); // 或者直接清除
});
});
<div id="loading"></div>
注意:
所有的ajax提交都会触发ajaxStart事件,都会在你定义的
<div id="loading"></div>
位置上显示“加载中。。。”的图标(当然你也可以定义文字,但是一个加载中的图片比较好看);
-------但是一定要注意,同时要定义好ajaxSuccess事件,ajax提交成功后把这个图标隐藏起来!
特别提示:
使用ajaxStart或ajaxSuccess事件时,相当于定义了一个全局的显示“加载中。。。”的位置,所有ajax提交时候“加载中。。。”的图标都始终显示在一个位置!
方法2:在ajax方法中定义任意位置显示的“加载中。。。”提示
$('#ajax_test2').click(function(){
$.ajax({
url ---- url路径,根据你需要些啦,
type:'post',
data:'name=ZXCVB',
timeout:15000,
beforeSend:function(XMLHttpRequest){
//alert('远程调用开始...');
$("#loading").html.("<img src='/jqueryStu/images/loading.gif' />");
},
success:function(data,textStatus){
alert('开始回调,状态文本值:'+textStatus+' 返回数据:'+data);
// $("#loading").empty();
},
complete:function(XMLHttpRequest,textStatus){
// alert('远程调用成功,状态文本值:'+textStatus);
$("#loading").empty();
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert('error...状态文本值:'+textStatus+" 异常信息:"+errorThrown);
$("#loading").empty();
}
});
});
< input type.="button" id="ajax_test2" value="Ajax方式">
<div id="loading"></div>
很明显,在beforeSend时,在指定的位置显示“加载中。。。”图标,在error、complete、success后把该图标移除掉!
注意:
页面有多个ajax提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!这就是它的优势:自由呀!
转载于:https://www.cnblogs.com/happiness-mumu/p/7381810.html
ajax提交时“加载中”提示的处理方法相关推荐
- [转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时"加载中"提示的处理方法 方法1:使用ajaxStart ...
- ajax 延迟显示加载中提示
近期做项目时用到了jquery的ajax,我希望实现"加载时提示用户"的功能,于是先习惯性的度娘谷哥了下,发现按照网上朋友所说的做,每次加载都会提示,不符合我的需求.于是我改进了下 ...
- mint-ui 图片懒加载及请求数据加载中提示方法
图片懒加载: 引入需要的文件 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></scr ...
- linux直接运行程序加载动态库失败,扣丁学堂Linux培训详解程序运行时加载动态库失败解决方法...
今天扣丁学堂Linux培训老师给大家介绍一下关于Linux程序运行时加载动态库失败的解决方法,希望对同学们学习有所帮助,下面我们一起来看一下吧. Linux下不能加载动态库问题 当出现下边异常情况 . ...
- ajax的loading方法,Ajax加载中显示loading的方法
使用ajaxStart方法定义一个全局的"加载中..."提示$(function(){ $("#loading").ajaxStart(function(){ ...
- dwz怎么使用数据加载中提示_百度地图数据采集手把手教,从此POI数据不再是愁...
本文介绍使用八爪鱼采集百度地图数据(以上海-建设银行为例)的方法 采集网站:http://map.baidu.com/ 适用版本:八爪鱼7版本,8版本请参照官网新手入门教程制作 8版本新手入门教程:用 ...
- 封装jquery的ajax,便于加载等待提示框
先贴上代码. 传入4给参数,保证post,get都能执行,和普通的ajax区别在于添加了设置的timeout. 并在每一次的发送接收请求后执行dialog()方法. function AjaxRequ ...
- bootstrap 数据加载中提示_解决Quartz定时器中查询懒加载数据no session的问题
作者:下一秒升华 出自:CSDN 原文:blog.csdn.net/u013815546/article/details/53032445 相信大家在web开发过程中一定遇到过一种情况,Class班级 ...
- java项目启动加载数据_java项目启动时加载数据库信息存入缓存方法
一.获取需要加载的数据 @Component public class MathMethod { public void addMethod(int i) { //查询方法存入redis等库 Syst ...
最新文章
- php el表达式,JSP EL表达式学习
- 关于mysql的update、delete、和insert into能否使用别名问题
- Angular 依赖注入 useClass 的实例创建位置
- python读取多个文件csv_Python:读取多个文本文件并写入相应的csv文件
- JS-数据类型转换-运算符
- 工厂模式 — 在项目中的用法
- [位运算|状态压缩] leetcode 78 子集
- 爬虫项目——BS练手(2)
- webbrowser控件 加载为空白_OpenLayers教程五:地图控件之坐标拾取控件和鹰眼控件...
- String 截取字符串#中间的文本
- DDD开发框架ABP之导航菜单
- 2×125MW发电厂升压站电气部分设计
- 一个微信群机器人PHP,vbot微信机器人操作联系人的API(3)微信群API
- 高中数学,解析几何高考压轴题解题技巧
- Android 使用图片缓存,避免OOM(实现照片墙)
- 谈谈我做技术经理的经验和教训
- shell 99乘法口诀表
- android模拟器玩手游,电脑上玩手游PC安卓模拟器哪个好用?哪个手机模拟器最好...
- 移动应用崩溃日志收集工具对比
- java lda主题模型_主题模型(一):LDA 基本原理
热门文章
- 你需要知道的css布局
- Web前端开发培训就业前景好不好?
- 小程序初始化服务器数据,微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页...
- vim-python j教程_实践Vim配置python开发环境
- can总线短距离不用双绞线_汽车中的总线系统——以太网(2)博通出世
- abaqus利用python实现部件合并_在abaqus python中使用Element()构造函数创建部件元素...
- 根据用户查进程_Linux进程之如何查看进程详情?
- STM8单片机低功耗---活跃停机(Active Halt)模式实现-1
- Python二:【ImageEnhance】+【PIL模块】如何利用python实现图像增强
- 【总结】Qt+Mysql5.5中文乱码解决