jsp + servlet简单实现进度条的滚动_jsp进度条直接跳到100%-CSDN博客

本文链接：https://blog.csdn.net/chen978616649/article/details/6412114

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<html>
    <head>
        <title>进度条</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        
<script type="text/javascript">
//全局变量
var xmlHttp; //XMLHttpRequest对象
var bar_color = 'green';                            //进度条背景颜色
var no_color="";                                     //解决浏览器兼容设置的无颜色变量
var clear = "";                                         //清空背景颜色用的变量

//回调函数
        function goCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    setTimeout("pollServer()", 1);
                }
            }
        }

        function pollServer() {
            createXMLHttpRequest();
            var url = "modifySessionDate.do?task=poll";
            xmlHttp.open("GET", url, true);
            xmlHttp.onreadystatechange = pollCallback; //设置回调函数
            xmlHttp.send(null);
        }

        function pollCallback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                //得到当前进度百分比
                    var percent_complete = xmlHttp.responseText;
                    var index = percent_complete / 2; //100个百分点，显示在50个block上
                    for (var i = 1; i <= index; i++) {
                        var elem = document.getElementById("block" + i);
                        elem.innerHTML = clear; //不设置innerHTML属性，非IE内核浏览器不会显示进度
                        elem.style.backgroundColor = bar_color; //为block设置背景颜色
                        document.getElementById("finish").innerHTML = '<font style="font-weight:bold;color:blue" mce_style="font-weight:bold;color:blue">'+percent_complete + '%'+'</font>';
                    }
                    //只要进度小于100%继续每隔1000毫秒调用一次pollServer()
                    if (percent_complete < 100) {
                        setTimeout("pollServer()",1000);
                    } else if(percent_complete == 100){
                        var redirectResultView="requestJSP2.do"; //要跳转的页面可以从servlet中传过来
var urlInfo = '正在加载展示数据,如果没有跳转请点<a href="';
urlInfo += redirectResultView;
urlInfo += '"><font color="red">这里</font></a>';
document.getElementById("complete").innerHTML = urlInfo;
                    //window.location.href = redirectResultView;
                    //alert("计算完毕");
                    }
                    //定义percent超过100后的错误信息
                    else if(percent_complete == 102){
                    alert("处理过程出现XX错误！");
                    }
                }
            }
        }

    //检查processBar所在div，设置其是否显示
        function checkDiv() {
            var progress_bar = document.getElementById("progressBar");
            if (progress_bar.style.visibility == "visible") {
                clearBar();
                document.getElementById("complete").innerHTML = "";
            } else {
                progress_bar.style.visibility = "visible"
            }
        }

        //清空processBar所在div
        function clearBar() {
            for (var i = 1; i < 10; i++) {
                var elem = document.getElementById("block" + i);
                elem.innerHTML = clear;
                //elem.style.backgroundColor = "white";
            }
        }

</script>
    </head>
    <body id="go" style="top:200px;hight:800px">

        <div style="top:145px;width: expression(body.clientWidth);z-index: 100;border: none;">
            <%int i = 1; %>
            <table border="0" align="center" cellpadding="0" cellspacing="0">
                <br>
                <br>
                <tr>
                    <td height="20" colspan="3" valign="top">
                        <center><h2>数据正在处理中，请稍候……</h2> <a href="javascript:go()">进度条test</a></center>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" valign="top">
                        <table align="center">
                            <tr>
                                <td align="center">
                                     <div id="progressBar" style="padding:2px;border:solid green 1px;visibility:hidden" mce_style="padding:2px;border:solid green 1px;visibility:hidden" align="left">
                                           <div style="width:800px">
                                                    <c:forEach begin="1" end="50" step="1" >
                                                        <span id="block<%=i++ %>" style="width:2%;"></span>
                                                    </c:forEach>
                                            </div>
                                      </div>
                                 </td>
                                 <td align="center" id="finish"></td>
                            </tr>
                            <tr>
                                <td align="center" id="complete">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>

        <java>
        String task = request.getParameter("task");
  if(task != null){
   try {
    String res = "1";
    String percentStr = "";
    PrintWriter out = response.getWriter();
   if("first".equals(task)){
    request.getSession().setAttribute("percent", "1");

   } else if("poll".equals(task)){
     //模拟进度条
     if(!"100".equals(percentStr)){
      String p = request.getSession().getAttribute("percent").toString();
      int temp_percent = Integer.parseInt(p) + 4 ;
      temp_percent = temp_percent>100?100:temp_percent;
      percentStr = String.valueOf(temp_percent);
      if(percentStr.equals("100")){
       request.getSession().removeAttribute("percent");
      }else{
       request.getSession().setAttribute("percent", percentStr);
      }
     }
     System.out.println("percentStr:"+percentStr);
     res = percentStr;
   }

   response.setHeader("Cache-Control", "no-cache");
   out.println(res);
   out.flush();
   out.close();
   } catch (IOException e) {
    // TODO 自动生成 catch 块
    e.printStackTrace();
   }

  }
    </body>
</html>