chychy12345678 2019-05-24 16:13 采纳率: 0%
浏览 2552
已结题

利用ajax动态的提取mysql中的数据,并且在前端页面中展示出来

代码如下:
前端html:


<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <!--<script type="text/javascript" src="jquery.js"></script>-->
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
    </body>

</html>
<script>
        var app = {
            xvalue: [],
            yvalue: [],
            z:[],
        };
        // 发送ajax请求,从后台获取json数据
        $(document).ready(function () {
            getData();
            console.log(app.value1);
            console.log(app.timepoint)
            console.log(app.predictvalue1)
        });

        function getData() {
            $.ajax({
                url: '/test',
                data: {},
                type: 'POST',
                async: false,
                dataType: 'json',
                success: function (data) {
                    app.value1 = data.value1;
                    app.predictvalue1=data.predictvalue1;
                    value1 = app.value1;
                    predictvalue1=app.predictvalue1;
                    function trueData(i) {
                        now = new Date(+now + oneDay);
                        value = value1[i];
                        return {
                            name: now.toString(),
                            value: [
                                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                                Math.round(value)
                            ]
                        }
                    }
                    function predictData(i) {
                        now1 = new Date(+now1 + oneDay);
                        predictvalue = predictvalue1[i];
                        return {
                            name: now1.toString(),
                            value: [
                                [now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'),
                                Math.round(predictvalue)
                            ]
                        }
                    }
                    var data = [];
                    var predictdata=[];
                    var now = +new Date(1997, 9, 3);
                    var now1 = +new Date(1997, 9, 4);
                    var oneDay = 24 * 3600 * 1000;
                    for (var i = 0; i < value1.length; i++) {
                        data.push(trueData(i));
                    }
                    for (var i = 0; i < predictvalue1.length; i++) {
                        predictdata.push(predictData(i));
                    }
                    // 基于准备好的dom,初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    option = {
                        title: {
                            text: '动态数据 + 时间坐标轴'
                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                params = params[0];
                                var date = new Date(params.name);
                                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                            },
                            axisPointer: {
                                animation: false
                            }
                        },
                        xAxis: {
                            type: 'time',
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                            splitLine: {
                                show: false
                            }
                        },
                        series: [{
                            name: '真实数据',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: [],
                            markLine: {
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,
                                        lineStyle: {
                                            type: "dash",
                                            color: 'red',
                                            width: 2
                                        },
                                        show: true,
                                        color: '#4c5336'
                                    }
                                },
                                data: [{
                                    yAxis: 900
                                }]
                            }
                        },
                        {
                            name: '预测数据',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: false,
                            data: [],
                            markLine: {
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,
                                        lineStyle: {
                                            type: "dash",
                                            color: 'blue',
                                            width: 2
                                        },
                                        show: true,
                                        color: '#4c5336'
                                    }
                                },
                                data: [{
                                    yAxis: 900
                                }]
                            }
                        }]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    setInterval(function () {
                        for (var i = 0; i < 1; i++) {
                            data.shift();
                            data.push(trueData(i));
                        }
                        for (var i = 0; i < 1; i++) {
                            predictdata.shift();
                            predictdata.push(predictData(i));
                        }
                        myChart.setOption({
                            series: [{
                                data: data
                            },
                            {
                                data: predictdata
                            }]
                        });
                    }, 1000);
                }
            })
        }
</script>
</body>
</html>

后端py,用的是flask框架:

import MySQLdb
from flask import Flask, render_template, url_for
import pymysql
import pandas as pd
import numpy as np
from pandas import read_csv
import matplotlib.pyplot as plt
from sklearn.preprocessing import MinMaxScaler
from sklearn.metrics import mean_squared_error
from keras.models import Sequential
from keras.layers import LSTM, Dense, Activation,Dropout
import json
import operator
from functools import reduce
import math
import tensorflow as tf
from keras import initializers
import time


# 生成Flask实例
app = Flask(__name__)


@app.route("/")
def hello():
    return render_template('new_file.html')


# /test路由    接收前端的Ajax请求
@app.route('/test', methods=['POST'])
def my_echart():
    # 连接数据库
    conn = MySQLdb.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test', charset='utf8')
    cur = conn.cursor()
    sql = 'SELECT timepoint,value1 from timeseries'
    cur.execute(sql)
    u = cur.fetchall()

    timepoint = []
    value1 = []

    for data in u:
        value1.append(data[1])
        timepoint.append(data[0])
    print(value1)
    # 转换成json格式
    jsonData = {}
    jsonData['value1'] = value1
    jsonData['timepoint']=timepoint
    # json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错,因此将数据写入时需要用到此函数
    j = json.dumps(jsonData)
    cur.close()
    conn.close()

    # 在浏览器上渲染my_template.html模板(为了查看输出数据)
    return (j)


if __name__ == '__main__':
    app.run(debug=True,port='5000')

返回的数据是从mysql中读取的,现在我想用ajax的方法定时请求数据库的下一个数据到达前台,并且刷新页面显示出来,应该怎么修改代码?
数据库如下:
图片说明

  • 写回答

3条回答 默认 最新

  • dabocaiqq 2019-05-24 16:18
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 vue2(标签-chrome|关键词-浏览器兼容)
  • ¥15 python网络流自动生成系统 医学领域
  • ¥15 sql查询仓库里都有什么
  • ¥15 代码的修改,添加和运行完善
  • ¥15 krpano-场景分组和自定义地图分组
  • ¥15 lammps Gpu加速出错
  • ¥15 关于PLUS模型中kapaa值的问题
  • ¥15 关于博途V17进行仿真时无法建立连接问题
  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器