flask与html交互问题

Question

自觉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) 好像只运行了一次。

请问这个是哪里出了问题

 

 

Answer 1

不太了解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)