網站首頁 編程語言 正文
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.com 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 = [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: 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>
對于后臺來說,我們不需要做任何變更,因為只要我們遵循返回JSON的格式即可,運行替換后的程序,我們可以看到控制臺會出現以下參數;
這就標志著接收的數據是正確的,我們來看下最終繪制效果;
當然有時候我們需要返回多個圖形,而不是一個,運用輪詢同樣可以實現,如下案例中將兩個儀表盤合并在了一起,并通過一個接口實現了數據的輪詢,相比上方代碼變化并不大。
<!-- # 署名權 # 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="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: me@lyshark.com 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.cnblogs.com/LyShark/p/16868703.html
相關推薦
- 2023-09-12 git常用指令
- 2022-03-13 C語言打印各種圖案實例代碼_C 語言
- 2022-03-15 使用Sqlyog遠程連接數據庫報錯解決方案_數據庫其它
- 2023-04-06 C++中的memset用法詳解_C 語言
- 2022-07-10 $route和this.$router區別
- 2022-10-01 Pycharm安裝scrapy及初始化爬蟲項目的完整步驟_python
- 2022-11-04 golang?cache帶索引超時緩存庫實戰示例_Golang
- 2023-02-07 Golang中結構體映射mapstructure庫深入詳解_Golang
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支