方法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提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!!!!!这就是它的优势:自由呀!!!!
==其他 =====================
加载中图片如下,当然你可以自由的设计哦:
分享到:
相关推荐
简单的jQuery加载等待转圈页面小插件
WEB开发中经常会用到AJAX来进行异步操作 通常在网络状况差的情况下 可能你的一个操作会有延迟 而客户端如果没有接受到提示可能会导致多次发送 如果你使用了jQuery,那么你可以使用这里提供的loading.js 只要引入到...
8.16 jQuery AJAX错误的处理方法 8.17 在页面级创建全局的AJAX监听器以及状态指示器 8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery...
Jquery可以对ajax进行全局的设置,实现类似于C#中面向切面的效果,即对在Ajax提交之前和提交完成之后,我们均可以对其进行一系列的操作,所以我们可以在ajax开始的时候,把Loading框显示出来,在ajax请求完成之后,...
JQuery 再谈ajax局部刷新。 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击退出弹出提示信息...
jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。
夸兰类Quora问答网络系统的实现,主要集中在通过使用jqueryui,插件来实现前端效果... 功能包括: 表单提交和验证的处理Cookie的处理电子邮件地址自动提示嵌入式编辑器发布问题使用ajax发布,显示,加载问题,评论...。
--我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这是默认属性)。 +PageManager的实例方法AddAjaxUpdateControl改名为...
-使得Asp.net的控件ImageButton具有和Asp.net的Button控件类似的行为(Ajax提交)(feedback:261629698)。 +TabStrip增加GetAddTabReference和GetRemoveTabReference两个函数,用来向TabStrip控件动态增加删除Tab。...
比如提交表单时如果等用户提交完表单后再提示用户某些项输入不正确,然后再返回给用户更正,这样用户就会感觉到麻烦,有可能就懒得提交,更有可能让站长丢失重要的信息.jmapcms网站开发系统都采用ajax和jquery方式实现...
1.[改进]去掉旧版AJAXRequest换成jQuery中的AJAX 2.[改进]为了系统安全和稳定去掉宇初验证码和印象码,加入4种数字验证码、1种中文验证码、1种计算题验证码供用户选择 3.[改进]为了后台系统安全,后台登录页不用判断...
asp.net mvc 通用权限管理系统(响应布局)源码是基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术,采用bootstrap为前台开发展示UI,Web Api主要负责前端...,再结合jQuery Ajax+Web Api进行提交数据请求...
基于asp.net(C#)MVC+前端bootstrap+ztree+lodash+jquery技术,采用bootstrap为前台开发展示UI,Web Api主要负责前端的逻辑交互,再结合jQuery Ajax+Web Api进行提交数据请求。 AngelRM_MVC通用权限管理系统特色 1、...
说明:通过本参数,在非标准submit提交环境下,比如AJAX提交,可以由用户点击提交按钮以触发编辑器最新值的同步 备注:v1.1.7新添加 onPaste:剪切板粘贴回调函数 参数值:用户粘贴后需要执行的函数 说明:此函数...
5.3.4 iui搜索支持ajax68 5.3.5 iui面板和行68 5.3.6 iui按钮70 5.3.7 iui属性70 5.4 创建iui后端71 5.5 其他iui技巧72 5.5.1 组织代码72 5.5.2 改善数据代码清单73 5.5.3 压缩iui74 5.5.4 选择...