前端如何实现后端运行进度_前端实时更新后端处理进度之 进度条实现

情景需求

在做图形提交界面时，点击提交按钮后，系统需要较长时间做处理，前端需要动态显示处理进度，并在完成后显示处理结果

实现逻辑

1.点击按钮后向后台发送数据处理请求2.后台处理数据3.前端获取后端处理进度并更新进度条

环境介绍

1.前端：html + Jquery + bootstrap2.后端：Django

功能实现

前端

html

网页页面使用bootstrap的进度条，进度条由2个div嵌套而成，通过修改内层div的width实现显示并更新进度，在此我们给进度条设置一个id：mbprocess，以便根据进度更改其显示状态

给用来提交表单的form设置一个ID，用来绑定form表单提交时的函数

form中提交表单的button绑定checkmbfw()函数用来检测提交信息是否符合要求

#	标准FW	勾选升级 全选	测试结果
BMC	{{ skuinfofw.bmcfw }}	升级

...

...//省略

升级

0/0

JS

在$(document).ready设定form提交时的函数,函数中我们使用setInterval函数完成持续向后端请求进度操作

在后端完成请求后结束setInterval动作，更新进度条样式

由于setInterval和get的回调函数都是异步执行，这里就相当于做了个登记，将任务加入队列。因此submit_query不必等待他俩就可以顺利结束。

$('#mbfw').submit(function(){

$('#mbfw').submit(function(){

...//省略

var sitv = setInterval(function(){                                var prog_url = "{% url 'return_width' %}"

$.get(prog_url, function(res){                                //在查询进度返回后更新每项测试结果

$('#mbprocess').width(res.width + '%');

$('#mbprocess').html(res.html);                                        var result_dict=res.result_dict;                                        

for (var item_result in result_dict){

if (result_dict[item_result].toUpperCase()=="PASS"){

$("input[value="+item_result+"]").parent().parent().parent().next().html('

PASS

');

}

else{

$("input[value="+item_result+"]").parent().parent().parent().next().html('

FAIL

');

}

}

});

}, 500); //此处‘500’用来设置查询间隔

$.get("{% url 'return_result' %}", {'itemtype':'mbfw','items':mbitems},function(ret){

clearInterval(sitv); //在请求最终测试结果返回以后清除‘setInterval’动作

if (ret.result=="pass"){

$("#mbprocess").prop("class","progress-bar bg-success progress-bar-striped progress-bar-animated");//更新进度条样式

$("#mbresult").prepend(successalert);

}

else {

$("#mbprocess").prop("class","progress-bar bg-danger progress-bar-striped progress-bar-animated");//更新进度条样式

$("#mbresult").prepend(dangeralert);

}

})

return false;

});

}

注：由于使用动态更新而非直接提交后后台返回，故form表单应函数完成时return false

后端

后端使用Django

url设置

首先后端需增加两个url，一个指向处理数据的的函数，另一个指向请求进度的函数

path('return_result',fw_update_views.ajax_dict,name='return_result'),

path('return_width',fw_update_views.return_width,name='return_width')

views.py

用全局变量记录处理进度，return_result函数负责具体任务，同时更新后台进度值，return_width负责将当前进度值返回给前端。当全局变量不被识别的时候使用global关键字。

process_width=0 //返回进度条宽度html_str="0/0"//显示在进度条上，当前完成测试项/总测试项result_dict={} //已完成测试项测试结果PASS/FAILdef ajax_dict(request):

itemtype=request.GET['itemtype']    global process_width,html_str,result_dict

...

process_width=num_tmp*100/sum_items

html_str="%d/%d" % (num_tmp,sum_items)

result_dict[item]="fail"

...

name_dict = {'result': "fail" }

time.sleep(1)    return JsonResponse(name_dict)def return_width(request):

dict_tmp={'width':process_width,'html':html_str,'result_dict':result_dict}

print(dict_tmp)    return JsonResponse(dict_tmp)

实现效果

去掉了敏感信息。。。

测试前

测试过程中

测试完成

第一次使用CSS的时候