情景需求
在作图形提交界面时，点击提交按钮后，系统须要较长时间作处理，前端须要动态显示处理进度，并在完成后显示处理结果html
实现逻辑
1. 点击按钮后向后台发送数据处理请求2. 后台处理数据3. 前端获取后端处理进度并更新进度条
环境介绍
1. 前端：html + Jquery + bootstrap2. 后端：Django
功能实现
前端
html
网页页面使用bootstrap的进度条，进度条由2个div嵌套而成，经过修改内层div的width实现显示并更新进度，在此咱们给进度条设置一个id：
mbprocess，以便根据进度更改其显示状态前端给用来提交表单的form设置一个ID，用来绑定form表单提交时的函数ajax
form中提交表单的button绑定
checkmbfw()函数用来检测提交信息是否符合要求bootstrap
<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
在
$(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; <!-- 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，一个指向处理数据的的函数，另外一个指向请求进度的函数ui
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）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。