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

代码如下:
前端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的方法定时请求数据库的下一个数据到达前台,并且刷新页面显示出来,应该怎么修改代码?
数据库如下:
图片说明

0

3个回答

0

后台加多一个参数,timepoint,请求的时候带上,SQL里面加上timepoint
前台使用定时器,每隔五秒调用一次刷新方法,并且timepoint + 1
得到数据后,显示

0

利用js的循环定时器:timename=setInterval("function();",delaytime);, function()对应去数的函数,delaytime是取数的间隔

0
chychyxmj
chychyxmj 能详细一点吗
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
利用Ajax实现数据的同步传输,从mysql中提取数据,通过echarts可视化
如何将mysql数据库中的方式通过echarts可视化呢,以下面这个简单的例子向大家进行演示: 步骤一:mysql的创表和插入数据,当然这些数据也可以是你通过爬虫抓取的。
Django+Ajax+MySQL实现网页动态获取数据库数据(实例演示:省市二级联动下拉框的实现)
先填两个坑我最长时间的大坑: 一、Django的CSRF问题 相信大家刚使用Django+POST时都遇到过这个问题,报错提示如下: 怎么解决这个问题,网上一搜好几种方法,有些好使有些不好使,我也不赘述,可以参考http://www.qttc.net/201209211.html 我实测了注释settings.py下的'django.middleware.csrf.CsrfViewMi...
基于Python、Mysql、Ajax、Neo4j的百度百科爬虫加知识图谱
基于Python、Mysql爬中,并利用Ajax写了动态展示,利用Neo4j的作了静态展示
PHP+MySQL+Ajax实现前端页面展示数据库的数据
昨天发现一款数据库管理软件:Navicat for MySQL,一款强大的 MySQL 数据库管理和开发工具,这款软件使用了极好的图形用户界面(GUI),可以用一种安全和更为容易的方式快速和容易地新建数据库、新建表等。前端学习过程中一直对后台如何从数据库读取数据,以及后台提供给前端接口等问题比较感兴趣,借此机会,尝试了一下新建数据库和表,用PHP从建好的数据库中读取数据,并在前端用Ajax将...
前端页面上传图片文件 以ajax请求 最终在页面渲染
前端页面上传图片文件 最终在页面渲染 //为文件域设置change事件 // fileUpload是要上传文件的文本框id // 注册文本框内容改变事件 $('#fileUpload').change(function(e){ // 通过事件对象的files属性得到文件信息 var file = e.target.files[0]; console....
ajax动态查询数据库数据并显示在前台
今天做了一个ajax动态查询数据库的小Demo,又重新学习了一下ajax的一些知识。在此和大家分享一下...... 啥都别说了,先上代码 Controller层 查询总用户数 @RequestMapping(value = "/findTotalUsers.do",method = RequestMethod.GET) public @ResponseBody Long fi
使用ajax传输数据,以及如何将数据动态展示在表格中
使用ajax传输数据,以及如何将数据动态展示在表格中 刚接触项目不久,总结下本周工作主要接触到的东西,定期总结与整理是个好习惯。 使用ajax将数据提交于后台,在这里展示一个简单的注册功能的前端代码。 其中url是我的请求地址 type代表请求方式,我这里使用post方式 dataType:数据处理方式。除了单纯的json,还可以指定 html、XML、jsonp、script或者text。 a...
Ajax+JSON动态显示某个div的内容
有很多童鞋觉得Ajax难,觉得弹出层难,觉得动态在某个层显示数据难,其实并非是难,而是你没有接触到这些技术,当你真正的使用过之后才发现原来不过尔尔。 好了闲话不多说,为了更好的说明问题,我写了一个简单的项目(这个功能是为朋友写的,所以名字未改,童鞋们下载后就知道了)。 项目的功能如下:点击前台的某个链接或者按钮,动态的在某个div层上显示从数据库中查询的内容(这个div可以是浮动层,我为了简单就没做浮动处理了),在项目中数据没有从数据库获取,只是根据前台Ajax请求传递的参数,动态的生成了一些内容。 项目简单,就没有做过多详细的注释,有说明不懂的地方或问题,可以随时联系我 QQ:346282626(公司不能用qq,只有晚上在家用) 所以有问题的话可以发邮件咯
Django读取Mysql数据并显示在前端
一、首先按添加网页的步骤添加网页,我的网页名为table.html, app名为web table.html放到相应目录下, froms文件提前写好 修改views.py from django.shortcuts import render from web import forms def table(request): table_form=forms.SignupFo
php+ajax+mysql用异步获取方法实现后台数据显示在前端并获取正文数据和完成上下分页
php+ajax+mysql用异步获取方法实现后台数据显示在前端并获取正文数据和完成上下分页 最近因为项目需要所以了解一下ajax异步获取的方法,现在把自己整理的代码贴出来,方便以后回顾和大家技术交流。
用php获取数据库中的数据通过ajax传递到hightchart生成实时动态曲线图
用php获取数据库中的数据通过ajax传递到hightchart生成实时动态曲线图
数据库存储BloB格式图片,并从数据库中取出显示到页面中
BloB类型就是以二进制的形式把图片保存到数据库中。包括:TinyBlob、Blob、MediumBlob、LongBlob,这几个类型之间的唯一区别是在存储文件的最大大小上不同。 TinyBlob 最大 255字节      ( 1024Byte(字节)=1KB ) Blob 最大 65KB MediumBlob 中等16M LongBlob 最大 4G 我自己是以表单里选
前端ajax请求数据展示到前端页面不显示标签只显示文本或者只显示格式不显示标签的方法
遇到一些数据展示问题,经过长时间,终于弄清楚,现记录下来以备查询。 一 前端接收后台数据的几种方式:     1   element.text(str)   获取的数据会原封不动的展示在页面上,包括数据里面的html标签,这种方式不适合展示,只适合单独获取文本      2   element.html(str)   获取的数据会将标签的格式展示在页面上,不会展示出标签来,这种方式适合页面展示。特...
从数据库提取图片文件显示到前端页面的一种方法
前言:上一篇写了如何从前端页面上传图片文件到mysql数据库,这篇写的就是如何将图片文件从数据库取出来,显示到前端页面一、图片是以blob的类型存到数据库的,所以在取的时候可以利用rs.getBytes()的方法来提取,这里的 rs 是jdbc从数据库查询出来结果集。下面是通过传来bookid,来将图片显示到一个servlet的方法1&amp;gt;dao层方法package com.bookstore....
jquery-ajax实现动态数据填入ul(新闻展示页面)
界面丑,未调整,数据随便写的稍后调整。先记录一下。1.头部加载文件:(低版本也可)&amp;lt;script src=&quot;js/jquery-3.3.1.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt;2.json文件:value.json本例子专门使用两层嵌套json,为了学习多层json的解析。{ &quot;name&quot;: &quot;中国&quot;, &quot;provi
ajax数据读取展示
html部分 &amp;lt;div class=&quot;list-wrap&quot;&amp;gt; &amp;lt;ul class=&quot;list-box&quot;&amp;gt; &amp;lt;/ul&amp;gt; &amp;lt;/div&amp;gt; js部分 //function ajax(url,data,callback){//如果有不同的url 可以通过注释的部分传不同的url $.ajax({ url: 'json数据路径', ...
Django与AJAX实现网页动态数据显示
前言 这部分已经折腾我两天了,还是没有头绪,可能还会折腾更久,最后在第三天上午解决问题,在一个不起眼的地方被坑了,jQuery加载的问题。会者不难,难者不会,希望后面人少走弯路吧 环境 windows10 pycharm2017.3.3 professional edition python3.6.4 django2.0.2 方法 创建后台读取数据函数,用于后台从数据库读取...
Ajax中循环输出数据库中的数据并在页面展示
 
json获取数据库的信息在前端页面显示
ajax发送请求到controller,controller响应一个json格式的数据给页面, JSON.parse()再解析json字符串,用$.each遍历。 @RequestMapping("/list") public @ResponseBody java.util.List<UserVO> List() throws Exception{ return s
ajax获取json数据展示
效果图: 原生js实现: *{margin:0;padding:0;} li{list-style:none;} #box{width:500px;height:640px;border:1px solid #ccc;position:relative;top:50%;left:50%;margin:20px -250px;} #box .con{width:500px;he
读取数据库数据,以报表的形式显示在前台网页(asp.net+echarts+ajax+数据库)
1、首先在VS2010里新建项目ASP.NET Web应用程序:WebApplication1; 在应用程序里新建项目:WebForm.aspx(Web窗体),Model.cs(类),Controller.cs(类),Handler.ashx(一般处理程序),WebForm.js(JScript文件); 2、(1)首先,创建一个Model类,对象实体化: namespace WebAppli...
Python 中Django动态上传图片和从数据库提取出来展示到网页上
因为自己在这一块走了点弯路,现在在这里做一个记录为日后作为参考。 网上对于Django的动态上传图片的完整实例不多,对于初学者来说是一个比较痛苦的事情。都要慢慢的去推敲。不说这么多了看具体。 上传图片: 我这边用的是sqlite3数据库 用到的代码: models.py from __future__ import unicode_literals fro...
用ajax实现HTML 功能,从而达到动态从数据库中得到数据,而不要去修改jsp页面。代码:
用ajax实现HTML 功能,从而达到动态从数据库中得到数据,而不要去修改jsp页面。代码:
PHP+MySQL开发小项目的集合笔记(二)从数据库提取数据,处理数据,前台处理并反映到界面
需求:从数据库提取需要数据,在业务模块内处理数据,前台提取数据并反映到界面。 MySQL语句: $sql = &quot; SELECT `TDC_PlanningHC`,`TDC_EntryHC`,`TDC_ExitHC`,`Priority_num`,`Priority_char` FROM rmk ORDER BY CASE when `Priority_...
前端动态加载(ajax接口连接后台数据,将后台数据返回到前端页面)。
前端页面: js代码: var httpurl = “http://60.205.179.111:8080” ;//访问电脑的路径 $(function () { debugger; var obj = { } ; $.ajax({ url: httpurl + '/queryOverProject1',//要连接的接口 type: 'POST', dataType: '...
ajax异步获取数据库数据绘制Echarts图表demo
ajax异步获取数据库数据绘制Echarts图表demo.rar
ajax+echarts+php实时动态图表显示
安装好xampp,把文件复制到htdocs,正常访问数据即可。如需要,请自行更改数据来源,
能实现从mysql中提取数据呈现
能实现从mysql中提取数据呈现能实现从mysql中提取数据呈现能实现从mysql中提取数据呈现能实现从mysql中提取数据呈现
用ajax返回到页面一个List,并循环生成下拉列表项
下面是几种转换成json格式的方法: 1 例如:  List --&amp;gt; json: List&amp;lt;Student&amp;gt; list = new ArrayList&amp;lt;Student&amp;gt;(); for (int i = 0; i &amp;lt; stus.length; i++) { list.add(i); } JSONArray jsonArray = JSO...
如何用Jquery将后台数据通过表格形式展现在页面上
jsp页面代码:table id="materialGrid" class="table table-striped table-bordered table-hover dataTables-example"> table> js代码: $(document).ready(function() { $('#materialGrid').bootstrapTable({
echarts+Servlet+mysql从数据库获取数据实现简单图表展示
用Servlet实现的echarts展示两种不同形式图表的小demo,使用的开发工具是eclipse,数据库是mysql。文件中包含项目源码,对应的数据库,以及项目运行后实现的图表截图(含url)。项目本人亲测,可完美展示图表,若有疑问,可Email我,Email:bpcforevery@gmail.com 。(ps:本人在另一个上传的文件中实现了用SSM框架实现的echarts展示图表的小demo,使用的数据库也是mysql,感兴趣的可以去看看)。
Django+xadmin开发笔记(四) mysql数据库数据展示到前段页面
(一)展示到前端前,我们先从把数据从数据库拿到后台。通过我们之前的方法。message = Noneall_name = UserMessage.object.fillter(&quot;数据字字段&quot;=&quot;条件&quot;)if all_name:    message = all_name[0]这里我们通过rened函数的第三参数来向前段传递我们的数据。return render(request,“映射的页面”,{ ...
使用AJAX向ECharts送入MySQL中的数据1:doPost方式
最近学完了ECharts官方推出的视频教程,了解了常用表格的个性化定制方法,但却并没有真正将其应用到我们的项目(Java Web项目)中。官方的所有业务都是与数据可视化相关的,具体到每一种项目,对于新手来说,只能通过论坛、博客或第三方技术教程网站来学习。为了让大家尽快地将ECharts应用到项目中,我也通过边学边做的方式,与大家共同来探讨! 为了使我们更专注于后台与前台交互的实现,我使用的例子是
数据库订单数据读取到前端展示
最近做了一个将数据库中的订单信息读取到前端展示的功能,在此简述之。 因为要展示的订单有发货和未发货两种,故在jsp页面中用两个div,以foreach循环显示每一个订单以及其中的商品属性。代码如下所示: 订单编号: ${a.orderSn} 待发货
ajax调取php,mysql后台数据实例
前面总结有关angularjs调取php后台的实例,今天分享一个使用原生ajax调取mysql数据库数据的实例。 mysql数据库表结构部分: mysql数据库表设计部分: PHP代码:<?php header("Access-Control-Allow-Origin: *"); header("Content-Type: application/json; char
数据从数据库到java代码再到前台页面展示流程
数据从数据库到java代码再到前台页面展示流程(以线索管理模块为例)somao_api >>>APP 端somao_common >>>工具类somao_domain >>>实体类somao_mybatis >>>dao impl servicesomao_web >>>{java–>controller}、{resources—
ajax 显示json数据在table中
$(function() { $('#test').click(function() { $.ajax({ url: 'fenshu.json', // data:"[{'name':'1', 'result'':'60''}]", type: 'get', dataType: 'json', success: function(jso
从数据库获取数据前端实现建树
//第一步表单 多选组织树:                         组织编码:                                         组织名称:              function selectMTree(eleId,eleName){                 var url='${requestCon
mysql中汉字显示正常,但是传到前端显示问号
错误现象:mysql中汉字显示正常,但是传到前端显示问号。使用java springmvc,从数据库中读取汉字,在controller中依然正常。但是controller返回json格式到js文件中汉字变成了问号解决办法@RequestMapping(value = &quot;/fillChatContent&quot;, method = RequestMethod.POST,produces = &quot;text/j...
原生js实现ajax和将数组以列表形式显示出来
function go(arrs){ //将一个字符串解析后放入ul标签中 var node=document.getElementById('list').firstChild; node.appendData('\n'); for(var j=0;j<arrs.length;j++){ node.appendData(''+arrs[j]+''); } }

相似问题

7
关于ajax链接前端后台的一些问题
3
用javascript动态ajax添加数据的判断怎么实现?
3
java前后端分离之后前端怎么展示数据
2
前端for循环批量提交10000条ajax请求,后半部分请求全部是 net::ERR_INSUFFICIENT_RESOURCES
2
SpringBoot前后端分离API接口怎么保证API接口的安全性?
2
如何再根据ajax获取的数据中的参数再去获取数据
4
利用ajax调用php查询数据库为什么返回data值为php整个文件的字符串
3
Java SSM框架使用ajax实现前端与后台交互时进入Controller获取到数据库数据怎么将数据返回给前端
1
LNMP环境,5000个ajax并发导致网站502错误,急求高人指点!
3
jsp中怎么使用ajax局部刷新table中的数据?
2
后台定时推送消息至前端,刷新前端页面局部数据
2
ajax请求获得的数据怎么携带到新页面?比如说登录之后携带数据打开新的页面
6
ajax请求获得的数据怎么携带到新页面?比如说登录之后携带数据打开新的页面
2
如何实现ASP.NET中使用jQuery中的ajax与后台的交互,求指点
2
ssm项目中ajax请求后台一部分函数后台Did not find handler method for [xxx],还有部分成功的为什么?
3
ajax 提交表单数据失败
2
在SSH框架中Action接受不到jquery_Ajax的data数据
2
在SSH框架中Action接受不到jquery_Ajax的data数据
4
定时刷新ajax获取实时数据,页面会越来越卡顿
3
ajax请求的json数据,获取的对象数组中,每个对象的属性顺序是怎么排的,这个排序的依据是什么呢