在做图形提交界面时,点击提交按钮后,系统需要较长时间做处理,前端需要动态显示处理进度,并在完成后显示处理结果
1. 点击按钮后向后台发送数据处理请求2. 后台处理数据3. 前端获取后端处理进度并更新进度条
1. 前端:html + Jquery + bootstrap2. 后端:Django
mbprocess
,以便根据进度更改其显示状态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>
$(document).ready
设定form提交时的函数,函数中我们使用setInterval
函数完成持续向后端请求进度操作setInterval
动作,更新进度条样式$('#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,一个指向处理数据的的函数,另一个指向请求进度的函数
path('return_result',fw_update_views.ajax_dict,name='return_result'),
path('return_width',fw_update_views.return_width,name='return_width')
用全局变量记录处理进度, 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 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!