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.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轮询动态绘图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Python Flask前后端Ajax交互的方法示例
之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "
-
Python flask使用ajax上传文件的示例代码
目录 前言 JS Form的enctype属性 Input MIME类型(更多直接百度,类型超乎你的想想) 上传单个文件 html代码部分 javascript代码部分 flask 视图函数部分 上传多个文件 html js 出问题解决方案 前言 JS 为什么要用ajax来提交在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 为安全起见,即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名.HTML value
-
Flask框架踩坑之ajax跨域请求实现
业务场景: 前后端分离需要对接数据接口. 接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用. 问题: 前端ajax请求后端接口出现跨域问题,如下图. 翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端. 什么是Access-Control-Allow-Origin? Access-Control-Allow-Origi
-
Python的flask接收前台的ajax的post数据和get数据的方法
ajax向后台发送数据: ①post方式 ajax: @app.route("/find_worldByName",methods=['POST']) type:'post', data:{'cname':cname,'continent':continent}, 这是post方式传值 那么在后台接收就是:(使用request的form方法) continent = request.form.get("continent") cname = request.form
-
Flask框架运用Ajax实现数据交互的示例代码
目录 前后端发送字符串 前后端发送JSON数据 发送数据并携带token 收发JSON格式字符串 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
Flask框架运用Ajax实现轮询动态绘图
Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echart绘图库进行图形的生成与展示,后台通过render_template方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态监控内存利用率的这个功能. 首先LyShark先来演示一下前端如何运用AJAX实现交互,通过$.ajax定义ajax开始标志,并指定url,type,datetype等信息,
-
Thinkphp结合AJAX长轮询实现PC与APP推送详解
前言 本文主要给大家介绍的关于Thinkphp结合AJAX长轮询实现PC与APP推送的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍. 实现逻辑 某个操作(比如新建一条公告)后,触发同时推送消息给APP或是移动WEB的所有用户或指定用户. 不论性能,总还是有人会用到吧,实现如下(基于Thinkphp5消息推送): PHP长轮询 /* * long轮询 API查询接口 */ public function id_log() { if (request()->isPost()) {
-
javascript和jQuery实现网页实时聊天的ajax长轮询
介绍 大家都知道,HTTP协议是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点: 1.支持客户/服务器模式; 2.简单快速; 3.灵活; 4.无连接; 5.无状态. 所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式无非有这么几种: 1.长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源. 2.Flash socket,
-
jquery与php结合实现AJAX长轮询(LongPoll)
HTTP是无状态.单向的协议,用户只能够通过客服端向服务器发送请求并由服务器处理发回一个响应.若要实现聊天室.WEBQQ.在线客服.邮箱等这些即时通讯的应用,就要用到" 服务器推送技术(Comet)". 传统的AJAX轮询方式,客服端以用户定义的时间间隔去服务器上查询最新的数据.种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度,但太短的时间间隔客服端会对服务器在短时间内发送出多个请求. 反转AJAX,就是所谓的长轮询或者COMET.服务器与客服端需要保持一条长时间的请求,它使
-
andriod如何搭建自己的轮询框架
很多时候Android应用需要每间隔一段时间向服务器请求数据,如果服务器数据有更新则通知界面变化.Android中最常用的红点一般采用的就是轮询,红点是为了在数据有更新时及时的提醒用户,比如朋友圈更新,当用户的朋友圈更新时就会显示红点,就是通过移动端不断的向服务器查询朋友圈的更新状态. 相关知识点 在实现轮询框架时会主要会要到下面两个类,会结合轮询框架对这三个类进行讲解,在应用中分析会理解更加深刻. 1.IntentService IntentService是一种特殊的Service,继承了Se
-
python轮询机制控制led实例
我就废话不多说了,大家还是直接看代码吧! # -*- coding:utf-8 -*- # File: ceshitianqi import urllib2 import json import time import datetime import serial import random import os import sys APIKEY = 'ZPdLyl***=' #改成你的APIKEY ser=serial.Serial("/dev/ttyUSB2",9600,timeo
-
利用python实现后端写网页（flask框架）
如何用python做后端写网页-flask框架 什么是Flask安装flask模块Hello World更深一步:数据绑定后端传入数据从前端获取数据 数据库连接screen创建后台查看删除后台 结束 什么是Flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .Flask使用 BSD 授权.以下程序均在自己服务器上运行(在vs code利用ssh进行连接) 安装flask模块 首先使用pip进行
-
python flask框架详解
Flask是一个Python编写的Web 微框架,让我们可以使用Python语言快速实现一个网站或Web服务.本文参考自Flask官方文档, 英文不好的同学也可以参考中文文档 1.安装flask pip install flask 2.简单上手 一个最小的 Flask 应用如下: from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World' if __na