项目实战(二)后台批量插入数据库，前台进度条显示进度

本功能后台通过List批量插入数据库，前台通过ajax调用，动态显示进度条。

先上传运行截图页面很丑陋，没美工。嵌套bootstrap的进度条。

前台代码：

点击button按钮，进行后台的数据库批量上传

<button onclick="ass()">导入</button><!-- <a href="#" class="btn btn-danger btn-xs" onclick="ajax()">进度条</a>--><hr /><!-- 进度条的显示 --><div class="progress progress-striped active" id="proges">        <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;">            <span id="proglabel">正在启动，请稍后......</span>        </div>    </div>  </div>

Ajax进行进度条的更新和后台的数据交互：

<script type="text/javascript"> var t; var time = 50; var timer_is_on=1; function ass(){ if(timer_is_on == 1){ t=setTimeout(function(){ass()},500); ajax(); }else{ clearTimeout(t); timer_is_on=1; }  }   function ajax(){      var xmlhttp;   if (window.XMLHttpRequest)      {// code for IE7+, Firefox, Chrome, Opera, Safari      xmlhttp=new XMLHttpRequest();      }    else      {// code for IE6, IE5      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");      }   xmlhttp.onreadystatechange = function(){   if (xmlhttp.readyState==4)       {       //alert(xmlhttp.status);       if(xmlhttp.status == 200){              //alert(xmlhttp.responseText+'~~~~');       if(xmlhttp.responseText == 100){       $("#prog").removeClass("progress-bar-success").css("width","0%").text("已经成功");       clearTimeout(t);       timer_is_on=0;              }       if(xmlhttp.responseText < 101){       startProgerss(xmlhttp.responseText);       }       }       }   }   xmlhttp.open("post", "${pageContext.request.contextPath}/progress.action");   xmlhttp.send(null);}   function reset( ) {       //value = 0         $("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");         //setTimeout(increment,5000);     }   function startProgerss(value){    if(value<=100){       $("#prog").css("width",value + "%").text(value + "%");    }       else{           setTimeout(reset,3000);           return;       }   }</script>

后台的实现：

后台代码：
后台用的springmvc+mybatis，插入数据库是采用List的批量插入，我们将整个List拆分成100份，注意此时的数据量非常大，百万级。
类中定义的：

//传值的索引public static int index;public static List<Customer> list = null;

后台：

//前台调用更新进度条@RequestMapping(value="/progress.action")@ResponseBodypublic int progress(HttpServletResponse response,HttpServletRequest request){if(flag == 1){flag = 0;insert(null, response, request);return index;}else{return index;}}//导入功能@RequestMapping(value = "/insert.action")@ResponseBody    public void insert(Model model, HttpServletResponse response,HttpServletRequest request) {  try {list = toData.paraseExcel(pathAll);//输出文件的路径System.out.println(pathAll);int length = list.size();System.out.println(length);int listArray = list.size()/100;if(index >=100){index = 0;}//int index=0;while(index<100){    if(index<99){    toData.proDisp(list.subList(index*listArray, (index+1)*listArray));    index++;            }else{    toData.proDisp(list.subList(index*listArray, list.size()));    index++;    list.clear();    flag = 1;    }        }System.out.println("导入ok!");} catch (Exception e) {e.printStackTrace();}    }