前端页面简单添加进度条

前端添加进度条

具体步骤如下：

• 前端代码：在页面添加下面代码

• 进度条样式：如果认为样式不太好，可以自己调试改动

• 请求后台接口的js方法：此处需要单独写相应的后台接口来实现

/**
 * 获取当前进度
 * @returns
 */
function setProcess(){
	$.ajax({
		url : "xx/getSession",
		type : "post",
		data : [],
		success : function(result) {
			var processbar = document.getElementById("processbar");
			processbar.style.width = result.obj + "%";
			processbar.innerHTML = parseInt(processbar.style.width) + "%";
			/*if(processbar.style.width == "100%"){}*/
		},
		error : function(errInfo) {
			layer.alert("获取进度失败！");
		}
	})
}

• 关闭进度条js方法：

/**
 * 关闭进度条
 * @returns
 */
function closeProcess(){
	window.clearInterval(bartimer);
    $(".processcontainer").hide();
    $("#processbar").css("width","0%");
    $("#processbar").html("");
    return;
}

• 页面调用获取进度条的方法，添加定时器，重复执行setProcess方法：

 	//定时请求后台获取进度session值
	bartimer = window.setInterval(function(){setProcess();},2000);//注意bartimer 为全局变量
 	$(".processcontainer").show();

• 后台接口代码很简单，获取session中的进度数字值：

/**
	 * 获取实时进度
	 * @param session
	 * @return
	 */
	@RequestMapping(value = "/getSession", method = RequestMethod.POST)
	@ResponseBody
	public JsonResult getSession(HttpSession session){
		try {
			String count = (String) session.getAttribute(Constants.SESSION_PLRXBK);
			return new JsonResult(true,"请求成功！",count); 
		} catch (Exception e) {
			return new JsonResult(false,"获取进度失败！");
		}
	}