HardBirch

JQuery+Servlet实现进度条

时间:09-08-24 栏目:iOS移动应用开发技术 作者:张飞不张,文采横飞 评论:0 点击: 1,459 次

上一篇JavaScript+Servlet实现进度条》模拟了进度条的实现。该篇使用JQuery改写上一篇中JavaScript相关的代码,进度条显示效果不改变。

         仍然在上一篇创建的web工程中编写代码。

         1.WebRoot下创建jsp页面progress_jq.jsp,与上一篇创建的progress.jsp除了引入的JS文件不同外,仍稍有区别,代码如下:        


















































         2.WebRoot/web/jslib下创建在progress_jq.jsp中引入的progress_jq.js文件,代码如下:

        



function process(){
checkDiv(); //检查processBar所在div
$.ajax({
type: "GET",
url: "progressBarServlet?task=first",
dataType:"text",
async: false,
success:function(){
setTimeout("pollServer()", 1);
}
});
}

function pollServer() {
$.ajax({
type: "GET",
url: "progressBarServlet?task=poll",
dataType:"text",
async: false,
success:function(percent_complete){
pollCallback(percent_complete);
}
});
}

function pollCallback(percent_complete) {
//得到当前进度百分比
// var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var index = percent_complete / 2; //100个百分点,显示在50个block上
for (var i = 1; i <= index; i++) {
var elem = $("#block"+i);
elem.html(clear);
elem.css("backgroundColor",bar_color);
var htmlVal = "<font style="font-weight:bold;color:blue" mce_style="font-weight:bold;color:blue">"
htmlVal +=percent_complete;
htmlVal += "%"
htmlVal +="</font>";
$("#finish").html(htmlVal);
}

//只要进度小于100%继续每隔1000毫秒调用一次pollServer()
if (percent_complete < 100) {
setTimeout("pollServer()",1000);
} else if(percent_complete == 100){
alert("计算完毕");
var redirectResultView="result.jsp"; //要跳转的页面可以从servlet中传过来
var urlInfo = "正在加载展示数据,如果没有跳转请点<a href="" rel="external nofollow" rel="external nofollow" ;
urlInfo += redirectResultView;
urlInfo += "" mce_href="" rel="external nofollow" rel="external nofollow" ;
urlInfo += redirectResultView;
urlInfo += ""><font color='red'>这里</font></a>";
document.getElementById("complete").innerHTML = urlInfo;
window.location.href = redirectResultView;
}
//定义percent超过100后的错误信息
else if(percent_complete == 102){
alert("处理过程出现XX错误!");
}
}

//检查processBar所在div,设置其是否显示
function checkDiv() {
var process_bar = $("#progressBar");
if(process_bar.css("visibility") == "visible"){
clearBar();
$("#complete").html("");
}else{
process_bar.css("visibility","visible");
}
}

//清空processBar所在div
function clearBar() {
for (var i = 1; i < 50; i++) {
var elem = $("block"+i);
elem.html(clear);
}
     

        3.进度条显示样式:

        http://blog.csdn.net/M_ChangGong/archive/2009/08/24/4480147.aspx

        4.进度条源代码下载地址:

   http://download.csdn.net/source/1601393

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: JQuery+Servlet实现进度条

JQuery+Servlet实现进度条:等您坐沙发呢!

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐