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毫秒的定时器,每隔一段时间则去后端取数据。





    
    
    


    
    

后端只需要根据前端需要的格式返回系统中的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()函数,将数据绘制到前台。





    
    
    


    
    

对于后台来说,我们不需要做任何变更,因为只要我们遵循返回JSON的格式即可,运行替换后的程序,我们可以看到控制台会出现以下参数;

这就标志着接收的数据是正确的,我们来看下最终绘制效果;

当然有时候我们需要返回多个图形,而不是一个,运用轮询同样可以实现,如下案例中将两个仪表盘合并在了一起,并通过一个接口实现了数据的轮询,相比上方代码变化并不大。





    
    
    


    
    

后端部分只需要稍微小改一下,将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轮询动态绘图
新闻来源:http://scyanting.com/article/dsdecji.html