情景需求
在作圖形提交界面時，點擊提交按鈕後，系統須要較長時間作處理，前端須要動態顯示處理進度，並在完成後顯示處理結果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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。