大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
摘要: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()
框架运行后,在前端可以看到两个仪表盘分别显示不同的参数;
点击关注,第一时间了解华为云新鲜技术~