摘要：Ajax是異步JavaScript和XML可用于前后端互動，
本文分享自華為云社區《Flask框架：運用Ajax輪詢動態繪圖》，作者：LyShark，
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: [email protected] --> <!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: [email protected] from flask import Flask,render_template,request import json,time,random async_mode = None app = 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.cnblogs.com/huaweiyun/p/[random.randint(1,100)] return json.dumps({"response":[times,data]}) if __name__ == '__main__': app.run()
運行這段代碼，然后打開控制臺，則可以看到如下資料，前臺會每隔一秒向后端請求資料；
如果上方繪制可以被正確執行，那么想要實作輪詢繪圖只需要封裝實作一個update()自定義繪圖函式，該函式內將得到的資料統一放入到陣列內，并呼叫封裝好的display()函式，將資料繪制到前臺，
<!-- # 署名權 # right to sign one's name on a piece of work # PowerBy: LyShark # Email: [email protected] --> <!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>
對于后臺來說，我們不需要做任何變更，因為只要我們遵循回傳JSON的格式即可，運行替換后的程式，我們可以看到控制臺會出現以下引數；
這就標志著接收的資料是正確的，我們來看下最侄訓制效果；
當然有時候我們需要回傳多個圖形，而不是一個，運用輪詢同樣可以實作，如下案例中將兩個儀表盤合并在了一起，并通過一個介面實作了資料的輪詢，相比上方代碼變化并不大，
<!-- # 署名權 # right to sign one's name on a piece of work # PowerBy: LyShark # Email: [email protected] --> <!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="cpuChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div> <div id="memChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div> <!--封裝方法,一次性繪制兩個圖形--> <script type="text/javascript" charset="UTF-8"> var display = function(cpu,mem) { var cpuChart = echarts.init(document.getElementById("cpuChart")); var option = { series: [ { name: 'Pressure', type: 'gauge', progress: { show: true }, detail: {formatter: '{value} %',fontSize: 12}, data: [{value: cpu, name: 'CPU負載'}] } ] };cpuChart.setOption(option, true); var memChart = echarts.init(document.getElementById("memChart")); var option = { series: [ { name: 'Pressure', type: 'gauge', progress: { show: true }, detail: {formatter: '{value} %',fontSize: 12}, data: [{value: mem, name: '記憶體利用率'}] } ] };memChart.setOption(option, true); }; </script> <!--定義輪巡--> <script type="text/javascript"> $( function () { fetchData(); setInterval(fetchData, 100); } ); function fetchData(){ $.ajax({ url:"/", type:"POST", dataType: 'json', success:function (recv) { display(recv.response[0],recv.response[1]); } }) } </script> </body>
后端部分只需要稍微小改一下，將json.dumps({"response":[cpu,mem]})回傳時指定兩個引數即可，
# 署名權 # right to sign one's name on a piece of work # PowerBy: LyShark # Email: [email protected] from flask import Flask,render_template,request import json,time,random async_mode = None app = 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()) mem = random.randint(1,100) cpu = random.randint(1,100) return json.dumps({"response":[cpu,mem]}) if __name__ == '__main__': app.run()
框架運行后，在前端可以看到兩個儀表盤分別顯示不同的引數；
點擊關注，第一時間了解華為云新鮮技術~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/533545.html
標籤：JavaScript
上一篇：this的指向