網(wǎng)站首頁 編程語言 正文
Ajax是異步JavaScript和XML可用于前后端交互，在之前《Flask 框架：運用Ajax實現(xiàn)數(shù)據(jù)交互》簡單實現(xiàn)了前后端交互，本章將通過Ajax輪詢獲取后端的數(shù)據(jù)，前臺使用echart繪圖庫進行圖形的生成與展示，后臺通過render_template方法返回一串JSON數(shù)據(jù)集，前臺收到后將其應(yīng)用到繪圖庫上，實現(xiàn)動態(tài)監(jiān)控內(nèi)存利用率的這個功能。
首先LyShark先來演示一下前端如何運用AJAX實現(xiàn)交互，通過$.ajax定義ajax開始標志，并指定url,type,datetype等信息，通過setInterval設(shè)置一個1000毫秒的定時器，每隔一段時間則去后端取數(shù)據(jù)。
<!--
# 署名權(quán)
# 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>
<!--設(shè)定一個定時器,每隔1000毫秒向后端發(fā)送請求-->
<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] 獲取到數(shù)據(jù):" + recv.response[1]);
}
})
}
</script>
</body>
后端只需要根據(jù)前端需要的格式返回系統(tǒng)中的CPU利用率（此處模擬），并使用json.dumps({"response":[times,data]})推送到前端即可。
# 署名權(quán)
# 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', # 配置靜態(tài)文件的訪問url前綴
static_folder='static', # 配置靜態(tài)文件的文件夾
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()
運行這段代碼，然后打開控制臺，則可以看到如下數(shù)據(jù)，前臺會每隔一秒向后端請求數(shù)據(jù)；
如果上方繪制可以被正確執(zhí)行，那么想要實現(xiàn)輪詢繪圖只需要封裝實現(xiàn)一個update()自定義繪圖函數(shù)，該函數(shù)內(nèi)將得到的數(shù)據(jù)統(tǒng)一放入到數(shù)組內(nèi)，并調(diào)用封裝好的display()函數(shù)，將數(shù)據(jù)繪制到前臺。
<!--
# 署名權(quán)
# 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>
<!--定義繪圖區(qū)域-->
<div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;"></div>
<!--調(diào)用百度的繪圖庫,進行圖片的繪制工作.-->
<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()函數(shù)具體執(zhí)行的任務(wù),其主要只保留前十條數(shù)據(jù).-->
<script type="text/javascript" charset="UTF-8">
// 負責(zé)對參數(shù)的解析
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("處理后的時間數(shù)據(jù):" + time);
console.log("處理后的CPU數(shù)據(jù):" + cpu);
display(time,cpu) // 調(diào)用繪圖函數(shù)
}
};
</script>
<!--設(shè)定一個定時器,每隔1000毫秒向后端發(fā)送請求-->
<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("獲取到數(shù)據(jù):" + recv.response[1]);
// 傳遞給處理函數(shù)
update(recv)
}
})
}
</script>
</body>
對于后臺來說，我們不需要做任何變更，因為只要我們遵循返回JSON的格式即可，運行替換后的程序，我們可以看到控制臺會出現(xiàn)以下參數(shù)；
這就標志著接收的數(shù)據(jù)是正確的，我們來看下最終繪制效果；
當然有時候我們需要返回多個圖形，而不是一個，運用輪詢同樣可以實現(xiàn)，如下案例中將兩個儀表盤合并在了一起，并通過一個接口實現(xiàn)了數(shù)據(jù)的輪詢，相比上方代碼變化并不大。
<!--
# 署名權(quán)
# 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>
<!--定義繪圖區(qū)域-->
<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: '內(nèi)存利用率'}]
}
]
};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]})返回時指定兩個參數(shù)即可。
# 署名權(quán)
# 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', # 配置靜態(tài)文件的訪問url前綴
static_folder='static', # 配置靜態(tài)文件的文件夾
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()
框架運行后，在前端可以看到兩個儀表盤分別顯示不同的參數(shù)；
原文鏈接：https://www.cnblogs.com/LyShark/p/16868703.html
相關(guān)推薦
- 2022-12-24 C++中的函數(shù)返回值與拷貝用法_C 語言
- 2022-08-27 C#從前面或后面按指定數(shù)量刪除字符串_C#教程
- 2022-08-25 .net?core中高效的動態(tài)內(nèi)存管理方案_實用技巧
- 2022-03-11 Golang如何讀取單行超長的文本詳解_Golang
- 2022-05-08 C++?vector的簡單實現(xiàn)_C 語言
- 2023-03-27 詳解C++11中的類型推斷_C 語言
- 2022-04-15 python機器學(xué)習(xí)MATLAB最小二乘法的兩種解讀_python
- 2022-03-29 關(guān)于Android冷啟動耗時優(yōu)化詳解_Android
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速