//为定时器创建一个数组,到时候一起清除
var dingShiQiArr=[];
//提示日志信息
var content ="";
//控制定时ajax的开关
var flag=false;
//定时获取日志信息的ajax属性
var getting = {
		type : "post",dataType:"json",async : true,//这里要注意,不能为false,否则这个请求会等上一个求完成才执行
		url :contextPathName+'/reportInfo/getLoggerInfos.do',beforeSend: function () {
			return flag;
		},success:function(data){
			var isStop=data.isStop;//这里为后台的日志信息被读取完后,告诉前台停止定时ajax的标志
			var resultList=data.resultList;
			if(resultList==null||(resultList.length==0)){//日志如果信息为空,不管他,继续请求
					return;
			}else{
				var importProgress= data.progress;//进度条
				$('#importProgressbar').progressbar('setValue',parseInt(importProgress));
				var loggerType=data.loggerType;
				$.each(resultList,function(index,value) { 
					content +="<p>"+value+"</p>";//将日志写入前台
				});
				$('#importResultDiv').html(content);
				document.getElementById('importResultDiv').scrollTop = document.getElementById('importResultDiv').scrollHeight;
				if(isStop==true){
					flag=false;
					$('#importProgressbar').progressbar('setValue',100);
					function test(){ 
    						flag=false;
    						for (var i = dingShiQiArr.length - 1; i >= 0; i--) {
		                			clearInterval(dingShiQiArr[i]);//清除定时器
    			        		};
    					}
    					var t1 = window.setTimeout(test,200); //200毫秒后执行test方法
    					window.clearTimeout(t1);
				}
			}
		},error: function() {
			return;
		}
};

dingShiQiArr.push(window.setInterval(function(){$.ajax(getting)},200)); 

这个在导入或导出操作之前放上这一行就行,但记得导入导出的ajax请求的async属性也为true!

这个controller实现的是从session里获取日志信息(进度条信息),每次获取的条数都只是一部分(上次读取位置到最后),这样处理,

@H_502_41@ @RequestMapping ("/getLoggerInfos") @ResponseBody public String getLoggerInfos (HttpServletRequest request,HttpServletResponse response) { Map <String,Object> jsonMap = new HashMap <String,Object> (); List <String> resultList = new ArrayList <String> (); List <String> resultListToHtml = new ArrayList <String> (); String loggerType = request.getParameter ("loggerType"); Integer progress = 100; boolean flag = false; // 读取日志的下标 int loggerIndex = 0; HttpSession session = request.getSession (); if (("import").equals (loggerType)) { // 获取导入日志信息 Object obj = session.getAttribute ("resultList"); Object loggerIndexObj = session.getAttribute ("loggerIndex"); Integer isExist = (Integer) loggerIndexObj; if (null != isExist) { loggerIndex = isExist; } jsonMap.put ("loggerType",loggerType); if (null != obj) { resultList = (List <String>) obj; for (; loggerIndex < resultList.size (); loggerIndex++) { String str = resultList.get (loggerIndex); if ("OVER".equals (str)) { flag = true; session.removeAttribute ("resultList"); } else { resultListToHtml.add (str); } } session.setAttribute ("loggerIndex",Integer.valueOf (loggerIndex)); } else { resultList = null; } // 获取导入进度 Object obj1 = session.getAttribute ("importProgress"); if (null != obj1) { progress = (Integer) obj1; } } else if (("export").equals (loggerType)) { // 获取导出日志信息 Object obj = session.getAttribute ("exportResultList"); Object loggerIndexObj = session.getAttribute ("exp_loggerIndex"); Integer isExist = (Integer) loggerIndexObj; if (null != isExist) { loggerIndex = isExist; } jsonMap.put ("loggerType",loggerType); if (null != obj) { resultList = (List <String>) obj; for (; loggerIndex < resultList.size (); loggerIndex++) { String str = resultList.get (loggerIndex); if ("OVER".equals (str)) { flag = true; session.removeAttribute ("exportResultList"); } else { resultListToHtml.add (str); } } session.setAttribute ("exp_loggerIndex",Integer.valueOf (loggerIndex)); } else { resultList = null; } // 获取导入进度 Object obj1 = session.getAttribute ("exportProgress"); if (null != obj1) { progress = (Integer) obj1; } } jsonMap.put ("isStop",flag); jsonMap.put ("resultList",resultListToHtml); jsonMap.put ("progress",progress); String jsonStr = JSONObject.fromObject (jsonMap).toString (); return jsonStr; }

html

补充(日志显示框滚动条在底部)

document.getElementById('importResultDiv').scrollTop = document.getElementById('importResultDiv').scrollHeight;

该代码表示,日志框出现滚动条时,会滚动到最底部,将呈现出一种动态的效果给用户!