Flask框架：如何运用Ajax轮询动态绘图
摘要：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: 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()
框架运行后，在前端可以看到两个仪表盘分别显示不同的参数；
Flask框架：如何运用Ajax轮询动态绘图的更多相关文章
- Flask框架：运用Ajax轮询动态绘图
Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echa ...
- COMET探索系列二【Ajax轮询复用模型】
写在前面:Ajax轮询相信大家都信手拈来在用,可是有这么一个问题,如果一个网站中同时有好多个地方需要用到这种轮询呢?就拿我们网站来说,有一个未读消息数提醒.还有一个时实时加载最新说说.昨天又加了一个全 ...
- AJAX轮询的实时监控画面
上一篇我们通过异步刷新Ajax 技术,来实现监控页面监控位号值的刷新,采用Ajax (Asynchronous Javascript And XML)技术,是指一种创建交互式.快速动态网页应用的网页开 ...
- 【Javascript】解决Ajax轮询造成的线程阻塞问题（过渡方案）
一.背景 开发Web平台时,经常会需要定时向服务器轮询获取数据状态,并且通常不仅只开一个轮询,而是根据业务需要会产生数个轮询.这种情况下,性能低下的Ajax长轮询已经不能满足需求,频繁的访问还会造成线 ...
- 浅谈Websocket、Ajax轮询和长连接（long pull）
最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket Websocket是HTML5中提出的新的协议,注意,这里是协议,可以 ...
- Ajax轮询以及Comet模式—写在Servlet 3.0发布之前(转)
2008 年的夏天,偶然在网上闲逛的时候发现了 Comet 技术,人云亦云间,姑且认为它是由 Dojo 的 Alex Russell 在 2006 年提出.在阅读了大量的资料后,萌发出写篇 blog ...
- WebSocket原理及与http1.0/1.1 long poll和 ajax轮询的区别【转自知乎】
一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)首先HTTP有1.1和1.0之说,也就是所谓的ke ...
- ajax轮询实时获取数据
最近做一个评论功能时,想要实现实时异步刷新评论功能,于是使用了ajax轮询,这里简单记录一下ajax轮询的原理及使用方法. ajax轮询的原理就是客户端定时向服务端发送ajax请求,服务器接到请求后马 ...
- ajax轮询与长轮询
刚刚网了关于轮询的知识,必须拿到自己这里来做个备份了! 其实以前用ajax轮询做个及时数据更新的,只是当时做了不知道那个就是轮询. 首先我们什么时候会想到用轮询技术呢? 一般而言,最多的是及时信息 ...
随机推荐
- KingbaseES 多列分区的方法与性能
前言 对于多列分区,可以选择单级多列的范围分区,也可以选择范围加子分区的方式.但二者在不同场景下对于性能是有差异的,这里的性能差异主要是分区裁剪引起的差异. 例子 创建两张分区表,采取不同的分区策略: ...
- KingbaseES R6 集群禁用 root ssh 后需要修改集群为es_server 案例
案例说明: 在生产环境下,由于安全需要,主机间不允许建立root用户的ssh信任连接,这样导致KingbaseES R6 repmgr集群,通过sys_monitor.sh脚本启动集群时,节点之间不能 ...
- 生信云实证Vol.12：王者带飞LeDock！开箱即用&一键定位分子库+全流程自动化，3.5小时完成20万分子对接
LeDock是苏黎世大学Zhao HongTao在博士期间开发的一款分子对接软件,专为快速准确地将小分子灵活对接到蛋白质而设计.LeDock优于大部分商业软件,在Astex多样性集合上实现了大于90% ...
- js中new的原理
面向对象 在了解new的原理之前,先简单地了解一下构造函数和对象. js可以通过构造函数创建对象: function Test() { } var t = new Test(); 构造函数的首字母大写 ...
- vscode常用快捷键及插件
macOS 全局 Command + Shift + P / F1 显示命令面板 Command + P 快速打开 Command + Shift + N 打开新窗口 Command + W 关闭窗口 ...
- kibana知识点
1.Kibana 有 Linux.Darwin 和 Windows 版本的安装包.由于 Kibana 基于 Node.js 运行,我们在这些平台上包含了一些必要的 Node.js 二进制文件.Kiba ...
- Elastic：Sense chrome - 在 chrome 浏览器中操作 Elasticsearch 的插件
文章转载自:https://elasticstack.blog.csdn.net/article/details/114533904 Sense 是我们现在所说的 Kibana 控制台 UI 的第一个 ...
- 打造企业自己代码规范IDEA插件（中）
一些基本概念 在开始独立研发公司自己的代码规范检查规则之前,先介绍一些相关的基本概念.阿里巴巴代码规范很多规则其实都是基于开源框架PMD进行的研发.PMD用官方的话语介绍来说:PMD是一个源代码分析器 ...
- C#-7 结构和枚举
一 什么是结构 结构是程序员定义的数据类型,有数据成员和函数成员,和类非常类似. 类是引用类型,而结构是值类型: 结构和类一样可以实现接口: 结构是隐式密封的,不能被派生: 结构类型的变量不能为nul ...
- docket打包镜像内部报错
临时记录,后面再完善 对于前端docker一般不太熟悉,当我们想要打包镜像的时候会去找教程,我按着教程去打包一个使用KOA框架搭建的node服务. 这是一个 koa + ts + pm2的项目 结果出 ...