使用Ajax实现简单的带百分比进度条实例

需求：当进行文件长传保存等操作时，能在页面显示一个带百分比的进度条，给用户一个好的交互体验

实现步骤

JSP页面

1.添加table标签

<table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
   <tr>
    <td><br><br>
    <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
      <tr bgcolor="#F7F7F6">
       <td width="20%" height="100" valign="middle">
        <table align='center' width='500'>
         <tr>
          <td colspan='2' align='center' id="progressPersent"><font size="2">
          正在进行保存，用时较长，请稍后...
          </font>
          </td>
         </tr>
         <tr>
          <td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
          <td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
         </tr>
        </table>
       </td>
      </tr>
    </table>
    </td>
   </tr>
  </table>　

　　这个table标签要隐藏，进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。

2.添加js代码

　　当点击保存时，执行loading()方法。

Action类

progressBar()方法

save()方法

　　注意：可以在复杂的业务中将代码段分成点，一个点的进度是占百分之多少，然后存放到Session中，然后通过ajax调用服务从Session中获取值，返回进度并显示即可。

效果

　　输入数据，点击【保存】时：

总结

　　带百分比的进度条，实际上是用ajax在保存中开启多个线程实现的：

一个线程，执行保存的操作:

　　　　1.将百分比计算出来，放到session中；

　　　　2.在线程结束的时候，将session清空。

另一个线程，从session中获取百分比的内容:

　　　　1.使用ajax将结果返回并显示在页面上

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jQuery+ajax调用WCF服务步骤详解

jQuery AJAX timeout 超时紧急处理方法

jquery+ajax怎么实现分页功能

以上就是使用Ajax实现简单的带百分比进度条实例的详细内容，更多请关注Gxl网其它相关文章！