欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

定时ajax获取日志(easyui进度条+js滚动条)

程序员文章站 2024-02-02 12:59:16
...

定时ajax获取日志(easyui滚动条+js)

定时ajax在获取日志信息方便还是很常用的,在这里我使用了easyui的进度条插件,现在整理了一下,完成的功能为:启动定时ajax,清除定时器

js代码

设置全局变量

//为定时器创建一个数组,到时候一起清除
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;
		}
};

启动定时ajax

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

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

Controller

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

<!-- 显示日志弹出框 importResultDiv-->
	<div id="showResult" class="easyui-dialog"
		style="width: 600px; height:550px;" closed="true"
		buttons="#showResult-buttons" data-options="modal:true">
			<div id="importProgressbar" class="easyui-progressbar" style="width:540px;margin-left:20px;margin-top:20px;"></div>
			<div id="importResultDiv" class="importResultDiv">
	
			</div>
	</div>
	
	<div id="showResult-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel" id="claenResult">关闭</a>
	</div>




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

document.getElementById('importResultDiv').scrollTop = document.getElementById('importResultDiv').scrollHeight;
该代码表示,日志框出现滚动条时,会滚动到最底部,将呈现出一种动态的效果给用户!

效果

定时ajax获取日志(easyui进度条+js滚动条)