定时ajax获取日志(easyui滚动条+js)
发布时间：2020-12-16 03:20:35 所属栏目：百科 来源：网络整理
导读：定时ajax获取日志(easyui滚动条+js) 定时ajax在获取日志信息方便还是很常用的,在这里我使用了easyui的进度条插件,现在整理了一下,完成的功能为:启动定时ajax,清除定时器 js代码 设置全局变量 //为定时器创建一个数组,到时候一起清除var dingShiQiArr=[];//提
定时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;
}
};
启动定时ajaxdingShiQiArr.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;该代码表示,日志框出现滚动条时,会滚动到最底部,将呈现出一种动态的效果给用户!
效果（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |