有时候前端向后端发送一个请求,后端处理的过程稍微有点长,为了增强用户体验,可以在前端用一个进度条显示后端的处理进程。简单实现方法。
思路:
- 前端使用setInterval()函数,设置每隔几秒向后端发送一次请求,这个请求就是请求后端的处理进程。
- 然后再创建一个ajax请求,向后端请求数据,请求成功之后将setInterval()函数停止
- 后端有两个方法,对应两个url请求,一个处理数据的请求,一个处理进程的请求
- 通过全局变量的形式,设定进程的进行。处理进程的请求方法就是把全局变量传给前端
大致思路就在上面,可以实现简单的进程显示。
具体代码:
前端使用的是nanobar进度条插件,关于它的使用和介绍可以参考我的上一篇博客===>
轻量级nanobar进度条插件的介绍和使用
后端使用的是Java语言的Struts2框架,其他语言或者框架道理类似
前端js代码
//每隔一秒查询进度
var intelval=setInterval(function () {
//执行ajax
$.ajax({
url:"image_progress.action",
dataType:"text",
type:"post",
success:function (data) {
$("#tips").html("正在分析,请稍等...");
$(".nanobar").fadeIn();
//显示进度
nanobar.go(data);
}
})
},1000);
//发送Ajax请求,将图片传给服务器
var formData = new FormData();
formData.append("upload",file);
$.ajax({
url:"image_upload.action",
data:formData,
dataType:"json",
type:"post",
contentType: false,
processData: false,
success:function (data) {
//结束后台进度查询
clearInterval(intelval);
nanobar.go(100);
$("#tips").html("");
$(".nanobar").fadeOut();
//显示分析结果
$("#result").html(data.value);
}
})
});
后端Java代码
//定义一个全局变量,用来接受显示进度
private static Integer global=0;
public String upload() {
global=0;
//处理上传的文件
.......
global=30;
......(处理逻辑)
//数据返回给前端
......
//重置全局变量
global=0;
}
return null;
}
//返回全局变量,显示进度
public String progress() throws IOException {
//自己定义,设置进度,根据处理速度判断
if(global>=30&&global<95){
global=global+5;
}
//数据返回给前端
......(返回global)
return null;
}
最终效果:
只是简单实现了一下,还有很多地方可以优化的
比如多用户同时使用的并发问题等