1. 首頁 > 生活百科 > >

Flask框架：運用Ajax輪詢動態繪圖

生活百科

Ajax是異步JavaScript和XML可用于前后端交互，在之前《Flask 框架：運用Ajax實現數據交互》簡單實現了前后端交互 ， 本章將通過Ajax輪詢獲取后端的數據，前臺使用echart繪圖庫進行圖形的生成與展示 ， 后臺通過render_template方法返回一串JSON數據集 ， 前臺收到后將其應用到繪圖庫上 ， 實現動態監控內存利用率的這個功能 。
首先LyShark先來演示一下前端如何運用AJAX實現交互 ， 通過$.ajax定義ajax開始標志，并指定url,type,datetype等信息，通過setInterval設置一個1000毫秒的定時器，每隔一段時間則去后端取數據 。
<!-- # 署名權 # right to sign one's name on a piece of work # PowerBy: LyShark # Email: me@lyshark.com--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script></head><body><!--設定一個定時器,每隔1000毫秒向后端發送請求--><script type="text/javascript">$(function () {fetchData();setInterval(fetchData, 1000);});function fetchData(){$.ajax({url:"/",type:"POST",dataType: 'json',success:function (recv) {console.log("[lyshark.com] 獲取到時間:" + recv.response[0]);console.log("[lyshark.com] 獲取到數據:" + recv.response[1]);}})}</script></body>后端只需要根據前端需要的格式返回系統中的CPU利用率（此處模擬） ， 并使用json.dumps({"response":[times,data]})推送到前端即可 。
# 署名權# right to sign one's name on a piece of work# PowerBy: LyShark# Email: me@lyshark.comfrom flask import Flask,render_template,requestimport json,time,randomasync_mode = Noneapp = Flask(import_name=__name__,static_url_path='/python',# 配置靜態文件的訪問url前綴static_folder='static',# 配置靜態文件的文件夾template_folder='templates') # 配置模板文件的文件夾@app.route('/',methods=['POST','GET'])def index():if request.method == "GET":return render_template("index.html")elif request.method == "POST":times = time.strftime("%M:%S", time.localtime())data = https://www.huyubaike.com/biancheng/[random.randint(1,100)]return json.dumps({"response":[times,data]})if __name__ == '__main__':app.run()運行這段代碼 ， 然后打開控制臺，則可以看到如下數據，前臺會每隔一秒向后端請求數據；

Flask框架：運用Ajax輪詢動態繪圖

文章插圖
如果上方繪制可以被正確執行，那么想要實現輪詢繪圖只需要封裝實現一個update()自定義繪圖函數，該函數內將得到的數據統一放入到數組內 ， 并調用封裝好的display()函數，將數據繪制到前臺 。
<!-- # 署名權 # right to sign one's name on a piece of work # PowerBy: LyShark # Email: me@lyshark.com--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script><script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script></head><body><!--定義繪圖區域--><div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;"></div><!--調用百度的繪圖庫,進行圖片的繪制工作.--><script type="text/javascript" charset="UTF-8">var display = function(time,cpu) {var main = echarts.init(document.getElementById(("main")));var option = {xAxis: {boundaryGap:false,boundaryGap:false,type: 'category',data: time},yAxis: {type: 'value'},series: [{type: 'line',areaStyle:{},data: cpu}]};main.setOption(option,true);};</script><!--update()函數具體執行的任務,其主要只保留前十條數據.--><script type="text/javascript" charset="UTF-8">// 負責對參數的解析var time =["","","","","","","","","",""];var cpu = [0,0,0,0,0,0,0,0,0,0];var update = function(recv){time.push(recv.response[0]);cpu.push(parseFloat(recv.response[1]));if(time.length >=10){time.shift();cpu.shift();console.log("處理后的時間數據:" + time);console.log("處理后的CPU數據:" + cpu);display(time,cpu)// 調用繪圖函數}};</script><!--設定一個定時器,每隔1000毫秒向后端發送請求--><script type="text/javascript">$(function () {fetchData();setInterval(fetchData, 1000);});function fetchData(){$.ajax({url:"/",type:"POST",dataType: 'json',success:function (recv) {console.log("獲取到時間:" + recv.response[0]);console.log("獲取到數據:" + recv.response[1]);// 傳遞給處理函數update(recv)}})}</script></body>

推薦閱讀