一个页面多个ajax，loading提示的问题

柏伦 Belen 2015-06-12 11:14:24
系统所有数据请求都是用的异步AJAX加载，也用了easyui组件。为了提高用户体验，防止重复提交等。我对系统加了全局AJAXloading提示，这个LOADING系统全部用同一个。我从2个方面去解决LOADING提示的问题。
1、我用了全局AJAX几个全局函数来处理，ajaxStartt和ajaxComplete来，很简单。如下代码：


// 显示loading。

$(document).ajaxStart(function(){

	$("#loader").show();

});




// 隐藏loading。

$(document).ajaxComplete(function(){

	$("#loader").fadeOut("fast");

});


2、系统所有AJAX请求进行了二次封装（这步实际上有点多余，因为我已经有了全局函数来处理）。如下代码：


$.ajax({

			type: method,

			url: url,

			data : paramStr,

			async : otherParams.async,

			onSubmit: function(){

	    		// onSubmit..

		    },

		    beforeSend : function(){

		    	$("#loader").show();

	        },

	        complete : function(){

	        	$("#loader").hide();

	        }

... ...

)}

不管用以上1还是2的解决办法都存在一个问题。一个页面多个AJAX，它们相互独立，是同步执行的，如果这样的话页面AJAX请求超过2个以上，那就会出现只有第一个ajax会有LOADING提示。
比如说：一个页面有1、2二个AJAX，页面加载时，ajax1先打开loading，此时ajax1还没执行完成，ajax2也同时打开了loading，而当ajax2打开loading的同时ajax1可能马上执行完成并且关闭了loading。。。结果就是ajax2还没执行完，loading已经关闭。

工作中用JQUERY及AJAX很多次，但从未遇到过这样的需求，也没有详细的去读AJAX的内部代码，我不知道JS或JQUERY有没有办法全局获取到页面有多少个AJAX请求？如果这样问题就好办了。或者有其它解决办法？
...全文
813 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
人生难得一只鸡 2015-06-12
  • 打赏
  • 举报
 回复
很简单的例子 你让多辆汽车同时发动起来，并有各自的奔跑过程，那么每辆车上都有自己的开关控制才对 而你现在用了一个总开关来控制了所有的车，每辆车在奔跑的时候随时都可以更新总开关的状态，显然是不合理的 要么分开单独处理，要么实现参数判断，比如如下的代码 
$("div").ajaxStart(function(){
    //每个DIV开始请求时，更新状态为加载中
    $(this).html("<img src='/i/demo_wait.gif' />");
  });
  //每个Div通过Ajax与服务器交换数据
  $("div").load("/example/jquery/demo_ajax_load.asp");
香蕉猪 2015-06-12
  • 打赏
  • 举报
 回复
是同步
香蕉猪 2015-06-12
  • 打赏
  • 举报
 回复
第二个Ajax改成异步的不就可以了？。。。
柏伦 Belen 2015-06-12
  • 打赏
  • 举报
 回复
引用 7 楼 KK3K2005 的回复:
//on ajax start $(document).ajaxStart(function(){ $("#loader").show(); }); //on ajax end $(document).ajaxComplete(function(){ $("#loader").fadeOut("fast"); }); ----> 分析 你希望几个不同ajax请求 共享同一个 load界面 条件 假定 ajax开始次数 ＝＝ ajax结束次数 方案 当结束次数 ＝＝ 开始次数的 时候 正式开始 hide 现成实现 jquery文档说明 所有的ajax全部结束后 将触发 ajaxStop事件 /on ajax start $(document).ajaxStart(function(){ $("#loader").show(); }); //on ajax end $(document). ajaxStop(function(){ $("#loader").fadeOut("fast"); });
感谢回复！这正是我想要的！ 真郁闷啊，我之前经常翻JQUERY的API，也看到过这个函数，只是想当然的觉得一个AJAX结束就会触发，没想到是多个AJAX全部执行完成后才会触发。 参考：http://www.w3school.com.cn/jquery/ajax_ajaxstop.asp 

定义和用法
ajaxStop() 方法在 AJAX 请求结束时执行函数。它是一个 Ajax 事件。
详细说明
无论 Ajax 请求在何时完成 ，jQuery 都会检查是否存在其他 Ajax 请求。
如果不存在，则 jQuery 会触发该 ajaxStop 事件。
在此时，由 .ajaxStop() 方法注册的任何函数都会被执行。
好吧，问题解决了！全局AJAX处理函数，加上SlipHover，基本上完美解决了系统loading提示的用户体验。
柏伦 Belen 2015-06-12
  • 打赏
  • 举报
 回复
引用 6 楼 danica7773 的回复:
写了一点，希望能帮到LZ 

$._ajax = $.ajax;
$.ajax = function(options) {
	var index, id, loadingStr;
	if(typeof window.ajaxQueue == 'undefined') {
		window.ajaxQueue = [];
		window.ajaxLoadings = {};
	}	
	index = window.ajaxQueue.length;
	id = Math.floor(Math.random() * 1000000);
	loadingStr = options.loadingStr || 'loading...';
	options.id = id;
	window.ajaxQueue[index] = id;
	window.ajaxLoadings[id] = loadingStr;
	if(window.ajaxQueue.length == 1) {
		$('#loader').show().html(loadingStr);
	}
	$._ajax(options);	
}
$('#loader').ajaxComplete(function(event, request, options) {
	var size, loading;
	var id = options.id;
	var index = window.ajaxQueue.indexOf(id);
	window.ajaxQueue.splice(index, 1);
	delete window.ajaxLoadings[id];
	size = window.ajaxQueue.length;
	if(size == 0) {
		$('#loader').hide().html('');
	} else {
		id = window.ajaxQueue[0];
		loading = window.ajaxLoadings[id];
		if(loading) {
			$('#loader').html(loading);
		}
	}
});
var s = $.ajax({
	loadingStr: 'loading 1',
	url: '/restaurant-menu.php?action=getCookiesFood', 
	success: function(data) {
		
	}
});
var s = $.ajax({
	loadingStr: 'loading 2',
	url: '/restaurant-menu.php?action=getCookiesFood', 
	success: function(data) {
		
	}
});
感谢回复，JS代码写得非常棒！AJAX队列应该能解决这个问题，但可能解决不了我现在这个问题或者解决起来工作量很大。我现在的系统用了easyui及自己写的一些AJAX。
KK3K2005 2015-06-12
  • 打赏
  • 举报
 回复
//on ajax start $(document).ajaxStart(function(){ $("#loader").show(); }); //on ajax end $(document).ajaxComplete(function(){ $("#loader").fadeOut("fast"); }); ----> 分析 你希望几个不同ajax请求 共享同一个 load界面 条件 假定 ajax开始次数 ＝＝ ajax结束次数 方案 当结束次数 ＝＝ 开始次数的 时候 正式开始 hide 现成实现 jquery文档说明 所有的ajax全部结束后 将触发 ajaxStop事件 /on ajax start $(document).ajaxStart(function(){ $("#loader").show(); }); //on ajax end $(document). ajaxStop(function(){ $("#loader").fadeOut("fast"); });
打字员 2015-06-12
  • 打赏
  • 举报
 回复
写了一点，希望能帮到LZ 

$._ajax = $.ajax;
$.ajax = function(options) {
	var index, id, loadingStr;
	if(typeof window.ajaxQueue == 'undefined') {
		window.ajaxQueue = [];
		window.ajaxLoadings = {};
	}	
	index = window.ajaxQueue.length;
	id = Math.floor(Math.random() * 1000000);
	loadingStr = options.loadingStr || 'loading...';
	options.id = id;
	window.ajaxQueue[index] = id;
	window.ajaxLoadings[id] = loadingStr;
	if(window.ajaxQueue.length == 1) {
		$('#loader').show().html(loadingStr);
	}
	$._ajax(options);	
}
$('#loader').ajaxComplete(function(event, request, options) {
	var size, loading;
	var id = options.id;
	var index = window.ajaxQueue.indexOf(id);
	window.ajaxQueue.splice(index, 1);
	delete window.ajaxLoadings[id];
	size = window.ajaxQueue.length;
	if(size == 0) {
		$('#loader').hide().html('');
	} else {
		id = window.ajaxQueue[0];
		loading = window.ajaxLoadings[id];
		if(loading) {
			$('#loader').html(loading);
		}
	}
});
var s = $.ajax({
	loadingStr: 'loading 1',
	url: '/restaurant-menu.php?action=getCookiesFood', 
	success: function(data) {
		
	}
});
var s = $.ajax({
	loadingStr: 'loading 2',
	url: '/restaurant-menu.php?action=getCookiesFood', 
	success: function(data) {
		
	}
});
柏伦 Belen 2015-06-12
  • 打赏
  • 举报
 回复
引用 3 楼 Return_false 的回复:
很简单的例子 你让多辆汽车同时发动起来，并有各自的奔跑过程，那么每辆车上都有自己的开关控制才对 而你现在用了一个总开关来控制了所有的车，每辆车在奔跑的时候随时都可以更新总开关的状态，显然是不合理的 要么分开单独处理，要么实现参数判断，比如如下的代码 
$("div").ajaxStart(function(){
    //每个DIV开始请求时，更新状态为加载中
    $(this).html("<img src='/i/demo_wait.gif' />");
  });
  //每个Div通过Ajax与服务器交换数据
  $("div").load("/example/jquery/demo_ajax_load.asp");
3Q。 我看了下SlipHover ，暂时找到了临时解决办法。 http://wayou.github.io/splash-screen-example/
引用 3 楼 Return_false 的回复:
很简单的例子 你让多辆汽车同时发动起来，并有各自的奔跑过程，那么每辆车上都有自己的开关控制才对 而你现在用了一个总开关来控制了所有的车，每辆车在奔跑的时候随时都可以更新总开关的状态，显然是不合理的 要么分开单独处理，要么实现参数判断，比如如下的代码 
$("div").ajaxStart(function(){
    //每个DIV开始请求时，更新状态为加载中
    $(this).html("<img src='/i/demo_wait.gif' />");
  });
  //每个Div通过Ajax与服务器交换数据
  $("div").load("/example/jquery/demo_ajax_load.asp");
3Q. 我明白，我想得可能太简单。我在想，有没有办法获取一个页面有多少个AJAX请求。 看到一个LOADING框架，叫SlipHover 。找到了一点解决方案。 http://wayou.github.io/splash-screen-example/
柏伦 Belen 2015-06-12
  • 打赏
  • 举报
 回复
贴子发出去的
引用 1 楼 gy127132060 的回复:
第二个Ajax改成异步的不就可以了？。。。
第一个AJAX加上async，同步执行。确实可以解决这个问题，但如果页面多于3个AJAX，就比较麻烦了。不管怎么样，针对页面AJAX不多的情况，这个解决方案是可行的。
导入JS就可以实现自动注册AJAX异步操作的动画效果(懒人的福音)
WEB开发中经常会用到AJAX来进行异步操作 通常在网络状况差的情况下 可能你的一个操作会有延迟 而客户端如果没有接受到提示可能会导致多次发送 如果你使用了jQuery,那么你可以使用这里提供的loading.js 只要引入到页面中,它会自动帮助你注册Ajax的开始和结束的动画效果 Blog: http://www.lordz.cn
ajax提交时页面转圈,jquery的ajax提交时loading提示的处理方法
方法1：使用ajaxStart方法定义一个全局的“加载中。。。”提示$(function(){$("#loading").ajaxStart(function(){ $(this).html("");});$("#loading").ajaxSuccess(function(){$(this).html("");// $(this).empty(); // 或者直接清除});});...
layer ajax loading,Ajax全局加载框(Loading效果)的配置
在Ajax进行后台数据请求的过程中，我们有时候会希望用户能知道页面后台还在做一些事情，这时候就需要给用户一个非常明确的提示，也就是我们所谓的进度条实现原理：Jquery可以对ajax进行全局的设置，实现类似于C#中面向切面的效果，即对在Ajax提交之前和提交完成之后，我们均可以对其进行一系列的操作，所以我们可以在ajax开始的时候，把Loading框显示出来，在ajax请求完成之后，把loadin...
jquery中的ajax 添加 loading... 提示
原文地址： http://www.5ixiudou.com/portal/detailInfo/1000000005/221 在jquery中，使用 ajax 时，加载数据比较慢，造成页面长时间木有变化，尤其是开始的空页面刚开始加载数据时，很容易让人不舒服，以为页面死掉了。这时，为了提高页面体验，可以加入一些等待的元素，比如 “信息正在加载，请稍后...”这样的提示；或者一些加载/等待的图片，...
ajax的loading方法,ajax请求成功前loading
1.jquery方式ajax加载loading图标提交$('#btn').click(function(){$.ajax({url:$('#test-form').attr('action'), //发送后台的urltype:'post',data:$('#test-form').serialize(), //序列化表单内容dataType:'text', //后台返回的数据类型timeout:1...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章