天易27----页面加载进度条

说明：进度条在网上下载一个动态的gif进度条图片即可.....

一：图片预览

二：

1.可刷新页面的进度条代码：

1）在页面body体中添加div层：

<div id="jindu" style=" display:'none';position:absolute; top:50%; margin-top:-50px; left:50%; margin-left:-50px; position:absolute; z-index: 1; text-align:center; vertical-align:middle;">
									<center>
										<img src="./images/jiazai.gif" > <br/><font color="black" size="2" style="left:400px;margin-top:1px;font-family:仿宋">正在更新数据,请稍等......</font>
									</center>
</div>

2）页面中button按钮：

<input name="input2" value="批量转入" type="button"  class="normalbtn" onClick="plshift(<s:property value="page.totalPage" />);"/>

3）调用上面按钮方法（plshift(<s:property value="page.totalPage" />)）：

function plshift(count){
	cookiesUpdate();
	var allsfzmhm="";
	var temp = "";
	for(var i=0;i<count;i++){
		temp = getCookie("page"+(i+1));
		if(temp=="null"){
			temp = "";
		}
		allsfzmhm +=temp;
	}
	allsfzmhm = allsfzmhm.replace(new RegExp('"','gm'),"");
	if(allsfzmhm!=""){
		document.getElementById("jindu").style.display='';//在调用后台方法前加上这一句：执行完毕隐藏进度条
		location.href = '/zbjp/driverAction.action?method=toPlzr&driverForm.tjSfzmhm='+ allsfzmhm;
	}else{
		alert("请选择转入学员！");
	}
}

2.无刷新页面的进度条代码：

图片预览：

1）在页面body体中添加div层：

<div id="jindu" style=" display:'none';position:absolute; top:50%; margin-top:-50px; left:50%; margin-left:-50px; position:absolute; z-index: 1; text-align:center; vertical-align:middle;">
									<center>
										<img src="./images/jiazai.gif" > <br/><font color="black" size="2" style="left:400px;margin-top:1px;font-family:仿宋">正在更新数据,请稍等......</font>
									</center>
</div>

2）页面中button按钮：

<input type="button" value=" 更新考试成绩 " οnclick="xzkscj()" class="normalbtn" style="margin-bottom: 5px" />

3）调用上面按钮方法（xzkscj()）：

function xzkscj(){
//document.getElementById("formName").action="<%=basePath %>sjxz.action?method=getXzkscj";
//document.getElementById("formName").submit();
document.getElementById("jindu").style.display='';
var urldic="<%=basePath %>sjxz.action?method=getXzkscj";
aj(urldic);
}

4）aj方法（主要用于ajax防止刷新页面）：

function aj(urldic){
				$.ajax({
					type: "POST",
					dataType:"json",
					url: urldic,
			  		success: function(result){
		  		 	document.getElementById("jindu").style.display='none';//document.getElementById("jindu"):"jindu"是div进度条层的id

					alert(result.value);
		  	}
		});
}

5）后台action（getXzkscj）方法：

/**
	 * 下载考试成绩
	 */
	public String getXzkscj() {
		// TODO Auto-generated method stub
		int kscjCount=sjxzSerivce.getXzkscjCount();
		this.news="共下载了"+kscjCount+"条考试成绩数据！";
		Map<String,String> message = new HashMap<String,String>();//以下三行主要用于ajax在页面的显示，不许刷新页面
		message.put("value", this.news);
		this.jsonMap(message, response);
		
		return null;//这里要返回null;
	}

6）ajax所需方法(上面所需调用的 jsonMap方法):

/**
	 * 把map转换为json输出到jsp
	 * 
	 * @param map
	 * @param response
	 */
	public void jsonMap(Map<String, ?> map,
			HttpServletResponse response) {
		jsonWriter(JSONObject.fromObject(map).toString(), response);
	}
	
	public void jsonWriter(String jsonSring, HttpServletResponse response) {
		response.setContentType("application/json;charset=UTF-8");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out;
		try {
			out = response.getWriter();
			out.print(jsonSring);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}