专栏首页WriteSimpleDemo前端实时更新后端处理进度之 进度条实现

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

情景需求

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

实现逻辑

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

环境介绍

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

功能实现

前端
html
  1. 网页页面使用bootstrap的进度条,进度条由2个div嵌套而成,通过修改内层div的width实现显示并更新进度,在此我们给进度条设置一个id:mbprocess,以便根据进度更改其显示状态
  2. 给用来提交表单的form设置一个ID,用来绑定form表单提交时的函数
  3. form中提交表单的button绑定checkmbfw()函数用来检测提交信息是否符合要求
          <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>
JS
  1. $(document).ready设定form提交时的函数,函数中我们使用setInterval函数完成持续向后端请求进度操作
  2. 在后端完成请求后结束setInterval动作,更新进度条样式
  3. 由于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;                                        <!-- 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;
                });
}

注:由于使用动态更新而非直接提交后后台返回,故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的时候

本文分享自微信公众号 - WriteSimpleDemo(this_is_a_wechat)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 千万级批量采集框架,就叫他UrlSpider吧

    我希望在整个理清楚数据采集这个行业的过程中,实现一个能高效的分布式的自带反爬虫的框架。。

    十四君
  • Bashed -- hack the box

    Only port 80 is open, it may be an easy box. And the truth is that it is really ...

    madneal
  • AJAX-前后端交互的艺术

    当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的

    BWH_Steven
  • 通过 DOM Clobbering 发现 GMail AMP4Email 的 XSS 漏洞

    原文:https://research.securitum.com/xss-in-amp4email-dom-clobbering/

    madneal
  • 用Python爬取b站弹幕,看大家还会接受《爱情公寓5》吗?

    尽管抄袭傍身,也没能阻挡《爱情公寓5》进击的脚步。 最近爱情公寓电视剧微博发布了长达8分钟的揭幕视频,官宣新季将在2020正式开播。 几位主演纷纷转发宣传,将#...

    朱小五
  • 马蜂窝消息总线——面向业务的消息服务设计

    蜂窝消息总线于 2017 年 11 月份上线,截至目前,已经被电商、酒店、大交通、社区等多个技术团队投入到生产环境的使用中。

    Spark学习技巧
  • 我写了个 Chrome 插件,一键下载 PornHub 视频!

    小詹有个读者叫 zgao,他之前写过一篇博客,爬取了 PornHub(下面全部简称 P 站)上的视频,代码很简单,关键还好用!当时小詹就 P 站上爬取了一些考研...

    GitHubDaily
  • H5多媒体能力

    ###事件 | 事件 | 描述 | | —- | —- | | abort | 在播放被终止时触发。| | canplay | 在媒体数据已经有足够的数据(至少...

    Tiffany_c4df
  • Nibbles - Hack the box

    Target: 10.10.10.75(OS: Linux) Kali linux: 10.10.16.44

    madneal
  • Help - hack the box

    To be honest, Help is not a difficult box. But there are some rabbit holes in th...

    madneal

扫码关注云+社区

领取腾讯云代金券