xyzivan
2021-05-08 19:28
采纳率: 50%
浏览 37

flask与html交互问题

自觉python,使用flask做后台,用于产生一个随机数组,目的是传到html中的echarts中去,使图表动起来,关键代码如下 :

FLASK:

@app.route('/',methods=["get","post"])
def hello_world():
    x = []
    x = utils.xiaoliang()
    time.sleep(1)
    print(x)
    return render_template("index.html",x=x)

HTML:
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '测试'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [199, 73, 78, 64, 73, 83]
             {
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    function getCharts() {
        $.ajax(
            {
                url: "/",
                type: "get",
                success: function (data) {
                    myChart.setOption({
                        series: [{

                            data: {{ x|tojson }}

                        }]
                    })
                }
            })
    }
    setInterval(getCharts,1000)

遇到问题是打开后开始会显示[199, 73, 78, 64, 73, 83] 这个数组的内容,过一秒后显示随机产生的{{ x|tojson }}这个内容,我的目标是每过一秒就产生一组随机数并显示,但是 setInterval(getCharts,1000) 好像只运行了一次。

请问这个是哪里出了问题

 

 

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 已采纳

    不太了解Python,不过看你代码肯定是有问题的,setInterval应该请求另外一个网址获取数据类似[199, 73, 78, 64, 73, 83]这种数据,而不是直接请求首页获取整个页面,这样数据是不对的,得到的是html。

     

    @app.route('/',methods=["get","post"])
    def hello_world():
        x = []
        x = utils.xiaoliang()
        time.sleep(1)
        print(x)
        return render_template("index.html",x=x) 
    def data(): 
      x = [] 
      x = utils.xiaoliang() 
      return x#不知道是不是这样,data要返回[199, 73, 78, 64, 73, 83]这种格式的字符串

    然后ajax请求data整个地址

     function getCharts() {
            $.ajax(
                {
                    url: "/data",//
    cache:false,//禁止缓存
                    type: "get",
                    success: function (data) {
                        myChart.setOption({
                            series: [{
    
                                data: data
    
                            }]
                        })
                    }
                })
        }
        setInterval(getCharts,1000)
    点赞 1 打赏 评论
  • xyzivan 2021-05-08 19:30

     

    点赞 打赏 评论

相关推荐