摘要：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轮询动态绘图的更多相关文章

  1. Flask框架：运用Ajax轮询动态绘图

    Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echa ...

  2. COMET探索系列二【Ajax轮询复用模型】

    写在前面:Ajax轮询相信大家都信手拈来在用,可是有这么一个问题,如果一个网站中同时有好多个地方需要用到这种轮询呢?就拿我们网站来说,有一个未读消息数提醒.还有一个时实时加载最新说说.昨天又加了一个全 ...

  3. AJAX轮询的实时监控画面

    上一篇我们通过异步刷新Ajax 技术,来实现监控页面监控位号值的刷新,采用Ajax (Asynchronous Javascript And XML)技术,是指一种创建交互式.快速动态网页应用的网页开 ...

  4. 【Javascript】解决Ajax轮询造成的线程阻塞问题（过渡方案）

    一.背景 开发Web平台时,经常会需要定时向服务器轮询获取数据状态,并且通常不仅只开一个轮询,而是根据业务需要会产生数个轮询.这种情况下,性能低下的Ajax长轮询已经不能满足需求,频繁的访问还会造成线 ...

  5. 浅谈Websocket、Ajax轮询和长连接（long pull）

    最近看到了一些介绍Websocket的文章,觉得挺有用,所以在这里将自己的对其三者的理解记录一下. 1.什么是Websocket Websocket是HTML5中提出的新的协议,注意,这里是协议,可以 ...

  6. Ajax轮询以及Comet模式—写在Servlet 3.0发布之前(转)

    2008 年的夏天,偶然在网上闲逛的时候发现了 Comet 技术,人云亦云间,姑且认为它是由 Dojo 的 Alex Russell 在 2006 年提出.在阅读了大量的资料后,萌发出写篇 blog ...

  7. WebSocket原理及与http1.0/1.1 long poll和 ajax轮询的区别【转自知乎】

    一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)首先HTTP有1.1和1.0之说,也就是所谓的ke ...

  8. ajax轮询实时获取数据

    最近做一个评论功能时,想要实现实时异步刷新评论功能,于是使用了ajax轮询,这里简单记录一下ajax轮询的原理及使用方法. ajax轮询的原理就是客户端定时向服务端发送ajax请求,服务器接到请求后马 ...

  9. ajax轮询与长轮询

      刚刚网了关于轮询的知识,必须拿到自己这里来做个备份了! 其实以前用ajax轮询做个及时数据更新的,只是当时做了不知道那个就是轮询. 首先我们什么时候会想到用轮询技术呢? 一般而言,最多的是及时信息 ...

随机推荐

  1. CCC3.0 NFC OWNER PAIRING

    OWNER PAIRING 本篇只介绍所有操作都成功执行的场景,中间如果出现异常,需要翻看规范决定接下来的操作 一些密钥 公私密钥对(Vehicle.PK&Vehicle.SK) Endpoi ...

  2. 第十五章 部署zookeeper集群

    1.集群规划 主机名 角色 IP hdss7-11.host.com k8s代理节点1.zk1 10.4.7.11 hdss7-12.host.com k8s代理节点2.zk2 10.4.7.12 h ...

  3. vscode调试thinkhphp

    第一步先安装xdebug扩展,我用宝塔环境,所以一键安装 第二步.在vscode中安装插件 我的php.ini是这样的 xdebug.remote_enable = 1 xdebug.remote_a ...

  4. k8s 中的 Pod 细节了解

    k8s中Pod的理解 基本概念 k8s 为什么使用 Pod 作为最小的管理单元 如何使用 Pod 1.自主式 Pod 2.控制器管理的 Pod 静态 Pod Pod的生命周期 Pod 如何直接暴露服务 ...

  5. Kubernetes 多租户：多租户介绍

    多租户集群由多个用户和/或工作负载共享,这些用户和/或工作负载被称为"租户".多租户集群的运营方必须将租户彼此隔离,以最大限度地减少被盗用的租户或恶意租户可能对集群和其他租户造成的 ...

  6. 15. 第十四篇 安装CoreDNS

    文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483850&idx=1&sn=4bfdb26f ...

  7. kvm使用桥接的方法

    什么是桥接 桥接就是把物理机的网卡模拟成交换机,虚拟机的网卡直接连在虚拟的网桥即交换机上.这样kvm虚拟机分配的IP地址,就应该和物理机在同一网段,可以对外进行服务. 在KVM下运行的VM默认的网卡采 ...

  8. ELasticsearch忘记密码后重置超级用户密码

    创建一个临时的超级用户TestSuper: [root@cfeea elasticsearch]# ./bin/elasticsearch-users useradd TestSuper -r sup ...

  9. nsis新插件：Aero.dll

    可以使安装界面在 win7 Aero特效下非客户区透明并美化BrandingText定义的字串 下载:http://nsis.sourceforge.net/Aero_plug-in nsis交流群: ...

  10. input 禁用历史下拉框

    autocomplete="off" 用法:<input id="inp1" autocomplete="off" />