php 进度条百分比算法,实例讲解Ajax实现简单带百分比进度条
最近做项目遇到这样的需求要求当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验,下面通过实例代码给大家介绍基于ajax实现带百分比进度条效果,需要的的朋友参考下吧,希望能帮助到大家。
需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验
实现步骤
JSP页面
1.添加table标签
|
这个table标签要隐藏,进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。
2.添加js代码/**添加带百分比的进度条*/
var xmlHttp;
//创建ajax引擎
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
}
}
}
}
function loading() {
createXMLHttpRequest();
clearLoad();
var url = "elecCommonMsgAction_progressBar.do";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = createCallback;
xmlHttp.send(null);
}
function createCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//每隔1秒钟执行一次percentServer()方法,直到当前访问结束
setTimeout("percentServer()", 1000);
}
}
}
function percentServer() {
createXMLHttpRequest();
var url = "elecCommonMsgAction_progressBar.do";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updateCallback;
xmlHttp.send(null);
}
function updateCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//获取XML数据中的percent存放的百分比的值
var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var tdOne = document.getElementById("tdOne");
var progressPersent = document.getElementById("progressPersent");
//改变蓝色区域的宽度
tdOne.width = percent_complete + "%";
//将百分比的数值显示到页面上
progressPersent.innerHTML = percent_complete + "%";
//如果计算获取的百分比的数值没有达到100,则继续调用方法,直到操作结束为止
if (percent_complete < 100) {
setTimeout("percentServer()", 1000);
}
}
}
}
function clearLoad() {
document.getElementById("load").style.display="";
document.getElementById("opperate1").style.display="none";
document.getElementById("opperate2").style.display="none";
}
当点击保存时,执行loading()方法。
Action类
progressBar()方法/**
* @throws Exception
* @Name: progressBar
* @Description: 在页面执行保存后,使用ajax,计算执行的百分比情况,将结果显示到页面上
* @Parameters: 无
* @Return: ajax如果不需要跳转页面,返回null或者NONE
*/
public String progressBar() throws Exception{
//从session中获取操作方法中计算的百分比
Double percent = (Double) request.getSession().getAttribute("percent");
String res = "";
//此时说明操作的业务方法仍然继续在执行
if(percent!=null){
//计算的小数,四舍五入取整
int percentInt = (int) Math.rint(percent);
res = "" + percentInt + "";
}
//此时说明操作的业务方法已经执行完毕,session中的值已经被清空
else{
//存放百分比
res = "" + 100 + "";
}
//定义ajax的返回结果是XML的形式
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
//存放结果数据,例如:88
out.println("");
out.println(res);
out.println("");
out.close();
return null;
}
save()方法/**
* @Name: save
* @Description: 保存表单数据到数据库
* @Parameters: 无
* @Return: String:重定向到system/actingIndex.jsp再查询
*/
public String save(){
//模拟:循环保存150次,方便观察百分比变化
for(int i=1;i<=150;i++){
elecCommonMsgService.saveCommonMsg(elecCommonMsg);//保存数据
request.getSession().setAttribute("percent", (double)i/150*100);
}
//线程结束,清空session
request.getSession().removeAttribute("percent");
return "save";
}
注意:可以在复杂的业务中将代码段分成点,一个点的进度是占百分之多少,然后存放到Session中,然后通过ajax调用服务从Session中获取值,返回进度并显示即可。
效果
输入数据,点击【保存】时:
总结
带百分比的进度条,实际上是用ajax在保存中开启多个线程实现的:
一个线程,执行保存的操作:
1.将百分比计算出来,放到session中;
2.在线程结束的时候,将session清空。
另一个线程,从session中获取百分比的内容:
1.使用ajax将结果返回并显示在页面上
相关推荐:
php 进度条百分比算法,实例讲解Ajax实现简单带百分比进度条相关推荐
- php ajax简单实例代码,Ajax的简单实用实例代码
这篇文章主要介绍了Ajax的简单实用实例代码,对ajax感兴趣的朋友可以参考下Ajax的简单实用的方法 我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在User ...
- Javascript迭代、递推、穷举、递归常用算法实例讲解
来源 | https://www.jb51.net/article/155800.htm 累加和累积 累加:将一系列的数据加到一个变量里面.最后的得到累加的结果 比如:将1到100的数求累加和 小球从 ...
- Linear regression with one variable算法实例讲解(绘制图像,cost_Function ,Gradient Desent, 拟合曲线, 轮廓图绘制)_矩阵操作...
%测试数据 'ex1data1.txt', 第一列为 population of City in 10,000s, 第二列为 Profit in $10,000s 1 6.1101,17.592 2 ...
- python分割数字_对python数据切割归并算法的实例讲解
当一个 .txt 文件的数据过于庞大,此时想要对数据进行排序就需要先将数据进行切割,然后通过归并排序,最终实现对整体数据的排序.要实现这个过程我们需要进行以下几步:获取总数据行数:根据行数按照自己的需 ...
- 粒子群算法Particle Swarm Optimization超详细解析+代码实例讲解
01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由Eberhart 博士和kennedy 博士提出,源于对鸟群捕食的行为研究 ...
- 【智能算法】粒子群算法(Particle Swarm Optimization)超详细解析+入门代码实例讲解...
喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由E ...
- 模拟退火算法详细讲解(含实例python代码)
模拟退火算法详细讲解(含实例python代码) (一)模拟退火算法简介 (二)模拟退火算法原理 (三)退火过程中参数控制 (四)算法步骤 (五)实例分析 最近老师要求做模拟退火算法实验,看了很多博客之 ...
- 实例讲解《Microsoft AJAX Library》(2):DomEvent类
引言: 大家都知道Ajax的之所以能如此丰富地实现,客户端脚本功不可没.而像Asp.Net Ajax这般庞大的工程,没有脚本类库的支撑是很难想象的.<Microsoft AJAX Library ...
- angluar ajax实例,Angular服务Request异步请求的实例讲解
首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...
最新文章
- 计算机病毒揭秘与对抗--注册表操作2
- easyui是否容易上手_特色家常菜-清蒸桂鱼,肉质鲜嫩有营养,做法简单容易学...
- 实体 联系 模型mysql_数据库系统概念读书笔记――实体-联系模型_MySQL
- php左边按钮右边显示,右侧操作按钮
- python朋友圈动态_如何利用Python网络爬虫爬取微信朋友圈动态--附代码(下)
- Map先排序value小->大再排序key小->大,ArrayList与Stream分别实现
- 硬盘如何分区及分区注意事项
- 微信小程序 tabs 选项卡 分页加载 + 图片上传
- JS 格式化时间字符串
- 2020最新教师资格证《中学综合素质》必考知识点大全
- 希腊语 - 希腊字母表对应的意思 - 数据挖掘必备
- 十年中国WLAN市场霸主,是谁?
- 石家庄建工科技学院有计算机专业吗,石家庄建工科技学院官网
- python3*1**3 表达式输出结果为_3*1**3 表达式输出结果为________
- Avoid object allocations during draw/layout operations
- html排班表源码,大师排班表.html
- IE8中的可访问性功能(一):光标浏览
- 十一、Actix-web 拦截器中间件
- 材料类学计算机吗,材料类专业适合女生吗
- 电信中兴F460光猫sendcmd命令