前端实时更新后端处理进度之 进度条实现

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

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

          <form id="mbfw">
         <table height="500" border="0"  valign="middle" class="table ">
         <tr><td colspan="2">
               <table height="400" width="100%" border="0"  valign="middle" class="table table-striped">
               <thead>
                 <tr>
                       <th>#</th>
                       <th>标准FW</th>
                       <th>勾选升级
                       <div class="form-check ">
                         <label class="form-check-label"><input type="checkbox" onclick="clickmbAll()" class="form-check-input checkmbAll">全选</label>
                       </div>
                       </th>
                       <th>测试结果</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                       <th>BMC</th>
                       <td>{{ skuinfofw.bmcfw }}</td>
                       <td>
                       <div class="form-check ">
                         <label class="form-check-label"><input type="checkbox" class="form-check-input checkmbOne" onclick="clickmbOne()" value="bmcfw" name="mbfw">升级</label>
                       </div>
                       </td>
                       <td class="testresult"></td>
                 </tr>
                 ...
                 ...//省略
         <button type="submit" class="btn btn-primary" onclick="return checkmbfw()">升级</button>
         </td>
         <td id="mbresult" width="90%" >
               <div class="progress" style="height:30px;">
               <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:0%;" id="mbprocess">0/0</div>
               </div>
         </td>
         </tr>
         </table>

$('#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;                                        <!-- alert(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('<h6 class="text-success">PASS</h6>');
                                       }
                                       else{
                                       $("input[value="+item_result+"]").parent().parent().parent().next().html('<h6 class="text-danger">FAIL</h6>');
                                       }
                                       }
                               });
                       }, 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;
                });
}

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

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)