Flask框架：如何运用Ajax轮询动态绘图

flask,框架,如何,运用,ajax,轮询,动态,绘图 · 浏览次数 : 80

小编点评

# 署名权# right to sign one's name on a piece of work# PowerBy: LyShark# Email: me@lyshark.comfrom flask import Flask,render_template,requestimport json,time,randomasync_mode = Noneapp = 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()框架运行后，在前端可以看到两个仪表盘分别显示不同的参数；点击关注，第一时间了解华为云新鲜技术~ # 代码描述 # 1. 定义绘图区域 # 2.封装方法，一次性绘制两个图形 # 3.定义轮巡 # 4.返回json数据 # 5.定义变量 # 6.框架运行后，在前端可以看到两个仪表盘分别显示不同的参数；点击关注，第一时间了解华为云新鲜技术~

正文

摘要：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()

运行这段代码，然后打开控制台，则可以看到如下数据，前台会每隔一秒向后端请求数据；

image.png

如果上方绘制可以被正确执行，那么想要实现轮询绘图只需要封装实现一个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的格式即可，运行替换后的程序，我们可以看到控制台会出现以下参数；

image.png

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

image.png

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

<!--
	# 署名权
	# 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()

框架运行后，在前端可以看到两个仪表盘分别显示不同的参数；

image.png

点击关注，第一时间了解华为云新鲜技术~

 

flask 框架 如何 运用 ajax 轮询 动态 绘图

与Flask框架：如何运用Ajax轮询动态绘图相似的内容：

Flask框架：如何运用Ajax轮询动态绘图

摘要：Ajax是异步JavaScript和XML可用于前后端交互。 本文分享自华为云社区《Flask框架：运用Ajax轮询动态绘图》，作者：LyShark。 Ajax是异步JavaScript和XML可用于前后端交互，在之前《Flask 框架：运用Ajax实现数据交互》简单实现了前后端交互，本章将通

flask 框架 如何 运用
80
python flask 提供web的get/post开发

转载请注明出处： 使用python flask框架编写web api中的get与post接口，代码编写与调试示例如下： from flask import Flask, request, jsonify app = Flask(__name__) @app.route('/api/get', met

python flask 提供 web
29
Flask框架：运用Ajax轮询动态绘图

Ajax是异步JavaScript和XML可用于前后端交互，在之前`《Flask 框架：运用Ajax实现数据交互》`简单实现了前后端交互，本章将通过`Ajax`轮询获取后端的数据，前台使用`echart`绘图库进行图形的生成与展示，后台通过`render_template`方法返回一串JSON数据集，前台收到后将其应用到绘图库上，实现动态监控内存利用率的这个功能。

flask 框架 运用 ajax
654
轻量级Web框架Flask（二）

Flask-SQLAlchemy MySQL是免费开源软件，大家可以自行搜索其官网（https://www.MySQL.com/downloads/） 测试MySQL是否安装成功 在所有程序中，找到MySQL→MySQL Server 5.6下面的命令行工具，然后单击输入密码后回车，就可以知道MyS

轻量级 web 框架 flask
275
Python web 框架对比：Flask vs Django

哈喽大家好，我是咸鱼 今天我们从几个方面来比较一些现在流行的两个 python web 框架——Flask 和 Django，突出它们的主要特性、优缺点和简单案例 到最后，大家将更好地了解哪个框架更适合自己的特定需求 参考链接：https://djangocentral.com/flask-vs-d

python web 框架 对比
420
Python Web：Django、Flask和FastAPI框架对比

Django、Flask和FastAPI是Python Web框架中的三个主要代表。这些框架都有着各自的优点和缺点，适合不同类型和规模的应用程序。 1. Django： Django是一个全功能的Web框架，它提供了很多内置的应用程序和工具，使得开发Web应用程序更加容易。Django采用了MTV（

python web django flask
401
快速上手python的简单web框架flask

简介 python可以做很多事情，虽然它的强项在于进行向量运算和机器学习、深度学习等方面。但是在某些时候，我们仍然需要使用python对外提供web服务。 比如我们现在有一个用python写好的模型算法，这个模型算法需要接收前端的输入，然后进行模拟运算，最终得到最后的输出。这个流程是一个典型的web

快速 上手 python 简单
561
SQLAlchemy - 模块文件以及增删改查(CURD操作)

创建 db.py db.py 文件是我们管理数据库连接和模型基类的地方。它让我们的代码更加模块化和可维护，实际生产中也是类似的，无论是在 FastAPI 或者 Flask 等框架中，当使用到 SqlAlchemy 时，的的确确需要一个单独 db.py，存储着引擎、会话以及模型基类。这个文件请务必建好

sqlalchemy curd
14
python flask 简单应用开发

转载请注明出处： Flask 是一个基于 Python 的微型 Web 框架，它提供了一组简洁而强大的工具和库，用于构建 Web 应用程序。Flask 的主要作用是帮助开发者快速搭建轻量级的、灵活的 Web 应用。 使用 Flask 可以按照以下步骤进行： 1.安装 Flask： 通过 pip 工具

python flask 简单 应用
244
Flask API 如何接入 i18n 实现国际化多语言

​ 1. 介绍 上一篇文章分享了 Vue3 如何如何接入 i18n 实现国际化多语言，这里继续和大家分享 Flask 后端如何接入 i18n 实现国际化多语言。 用户请求 API 的多语言化其实有两种解决方案： 后端返回："USER_ERROR" => 前端渲染："用户错误" 后端接收请求中 "Ac

flask api i18n
12
# 热门排行
微软 New Bing AI 申请与使用保姆级教程（免魔法） ChatGPT API使用介绍 ChatGPT开发实战 一篇带你了解如何使用纯前端类Excel表格构建现金流量表 手把手教你玩转 Excel 数据透视表 为什么 C# 可能是最好的第一编程语言 .NET 入门到高级路线 提高工作效率的神器：基于前端表格实现Chrome Excel扩展插件 React + Springboot + Quartz，从0实现Excel报表自动化 用Echarts实现前端表格引用从属关系可视化
© PmDaddy. 2023 PmDaddy教程网 All rights reserved.