从数据库动态获取数据并显示

.NET 专栏收录该内容
2 篇文章 0 订阅

实习开始一周了,今天终于做出了一个Demo,菜鸡本菜了,下面开始正题:

这次的demo是一个经典三层项目,首先是前端的代码(因为这块儿刚接触,对小菜本菜来说最难),

.aspx.cs代码:

 

using DLL;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default3 : System.Web.UI.Page
{
    public static string returnValue = "";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)            //初次加载该页          
        {
            returnValue = "[";
            DataTable list;//声明表变量           
            list = UserManage.table();
            foreach (DataRow dr in list.Rows)
            {               
                string dataY = "";
                string dataX = "";
                dataX = "[" + dr["DataTime"].ToString() + ",";
                dataY = dr["SY1"].ToString() + "]";
                returnValue += dataX + dataY + ",";
            }
            returnValue = returnValue.Substring(0, returnValue.Length - 1)+"]" ;           
        }
    }

    [WebMethod]

    public static int[] getData()
    {
        DataTable temp;//声明表变量           
        temp = UserManage.table();
        int sum = temp.Rows.Count - 1;
        int listX = Convert.ToInt32(temp.Rows[sum][0]);
        int listY = Convert.ToInt32(temp.Rows[sum][1]);
        int[] dataOne = { listX, listY };
        return dataOne;      
    } 
}
 

这由于是三层结构,读取数据库的操作都在DAL和BLL层封装好了,这里就不细说了,小菜建的数据库只有三个字段,最后一个字段下没有数据,第一个字段是"DataTime",第二个字段是 "SY1",下面上.aspx界面代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="js/jquery.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/code/highcharts.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <div id="container" style="width:550px;height:400px;margin:0auto"></div>
    <script lang ="JavaScript">
                    
        
            //声明报表对象 

        var chart = new Highcharts.Chart({

            chart: {
                //将报表对象渲染到层上 

                renderTo: 'container',

                defaultSeriesType: 'spline'

            }, //chart end

            title: {
                text: '泵站数据'
            },

            yAxis: {
                title: {
                    text: 'Data(*)'
                }
            },

            //设定报表对象的初始数据 

            series: [{
                name: "疯了",
                data: [],               
                }]
              

        });  //Highcharts.Chart end 
      
             // chart.addSeries({ name: 'DataURL serie', data:<%=returnValue%>}); 
         getdata();
             //获取后台数据
            function getdata() {

                $.ajax(
                    {

                        //可以动态取值了,不要动!!!!!!!!============================================================
                        type: "post",                        
                        //后台获取数据的函数,注意当对该页面重命名时,
                        url: "Default3.aspx/getData",
                         //返回数据形式为json
                        contentType:"application/json; charset=utf-8",
                         dataType: "json",
                       //可以动态取值了,不要动!!!!!!!!还有下面的result.d,一定要加.d!!!!!!============================================================

                        //成功获取数据
                        success: function (result) {
                            var series = chart.series[0];
                            // chart.series[0].update({
                            //     name: "疯了",
                            //     data: result.d,                                 
                            //})
                            //alert("tip@@@@@@@@@@" + result.d + "@@@@@@@@@@@@end");
                            var jsonOne = JSON.parse(result.d) ;
                            series.addPoint(jsonOne.dataL);
                            alert("tip@@@@@@@@@@" + jsonOne.dataL + "@@@@@@@@@@@@end");
                           // series.addPoint(result.d);
                            //series.addPoint([1, 20, 40, 60, 10]); //addPoint一次只能添加一个点,第一个数为x轴坐标,第二个数为y轴坐标,后面的不会识别。
                            //chart.series[0].setData({name: 'time', data:[[1,30],[2,10],[3,40]]});//此格式不可用
                            //chart.series[0].setData([[1, 20],[2,30]]);//测试setData所需的参数格式(number类型的以上格式)

                            //varseries= chart.series[0];
                            // series.addPoint([data[0]["x"],data[0]["y"]],false,true);
                            //chart.redraw();
                        },

                        //显示错误                                       
                        error: function (err) {
                            //alert(err + "调用后台程序出现错误,请尝试刷新!");
                            alert("错误tip@@@@@@@@@@"+result.d+"@@@@@@@@@@@@end");
                        },

                    });  
            }
         $(document).ready(function() { 

            //每隔3秒自动调用方法,实现图表的实时更新 

            window.setInterval(getdata,10000); 
        });         
       // });
       
        </script>   
   
        </div>
    </form>
</body>
</html>

下面是highcharts和Ajax中小菜踩过的坑:

1.Ajax的请求参数,可以看到小菜在程序里写的不要动!!!(咆哮),因为大小写和格式的问题,小菜调试过N次,最终确定的可用格式,url里的写法,斜杠后面是方法,不加括号!(其他格式或许也可行吧,不知道有没有其他因素,比如小菜马虎) ,

2.返回值类型,result.d才是你调用的方法返回的数据,注意dataType和contentType的类型,如果不正确的话是不能返回getData方法的返回值的(有可能返回整个.aspx页面)

3.highcharts中各方法需要的值类型,格式如上代码,但是小菜调试过程中发现,如果是后台返回一个string类型的[1,10],这边的addPoint和setData方法都是不能识别的,没错,它们需要的是number,因为json对象的传值小菜还在疑惑,就不误导大家了

PS:小菜的项目还没做出来,最近会一直更相关的经历,大家有兴趣的话可以多指导小菜!

  • 3
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值