HTML+ashx或aspx+ashx绑定SQL数据库数据

susan花雨

于 2022-04-12 11:26:24 发布

阅读量1.3k

点赞数

分类专栏： # Echarts web前端数据库文章标签： ajax echarts

本文链接：https://blog.csdn.net/qq_42711010/article/details/124119361

版权

数据库同时被 3 个专栏收录

19 篇文章 2 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

Echarts

2 篇文章 0 订阅

订阅专栏

记录HTML+ashx或aspx+ashx绑定SQL数据库数据的实例，方便以后查阅。

HTML

其中jquery-1.8.1.min.js、echarts.js文件自行在网上下载
HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
    <style>
        body{
            background-color :black;
        }
    </style>
</head>
<body>
    <div id="oee" style="width:300px;height:300px"></div>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script src="js/class/oee.js"></script>                  
</body>
</html>

oee.js代码：


//function Oee(o) {
var myChart1 = echarts.init(document.getElementById('oee'));
var option1;
    option1 = {
        tooltip: {
            formatter: "{b} : {c}%",

        },
        series: [
            {
                name: '',
                type: 'gauge',
                min: 0,//最小值
                max: 100,//最大值
                splitNumber: 10, //刻度的个数
                radius: "100%",//大小  
                title: {
                    textStyle: { //当前温度的文字大小
                        fontSize: 18,
                        color: 'white',
                    },
                },
                pointer: {  //指针
                    width: 3,
                    length: '90%',
                },
                axisLabel: { //刻度的大小
                    textStyle: {
                        fontSize: 16,
                    },
                },
                axisLine: { //外轮廓的宽度
                    lineStyle: {
                        width: 15,
                        color: [[0.6, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']],
                    }
                },
                splitLine: { //刻度线的长度和宽度
                    length: 15,
                    lineStyle: {
                        width: 1,
                    }
                },
                detail: {
                    formatter: '{value}%',
                    textStyle: { //当前温度的文字大小
                        fontSize: 16,
                        color: 'white',
                    },
                },
                data: [{
                     value:60,
                     name: 'OEE',
                }]
            }
        ]
    };   
    //实时更新数据,循环读值
    var gettingoee = {
        type: "post",
        async: false,
        url: "cs/Test03.ashx",//文件地址自行定义
        data: { cmd: "test" }, //发送到服务器的参数
        datatype: "json",
        success: function (result3) {
            if (result3) {
                eval("var transresult=" + result3);
                option1.series[0].data[0].value = [transresult[0].OEE];
                myChart1.setOption(option1, true);
            }
        },
        error: function (errorMsg) {
            alert("request data failed!!!");
        }
    }
    window.setInterval(function () { $.ajax(gettingoee) }, 3000);   //每三秒调用一次ajax  
    myChart1.setOption(option1, true);   
    setTimeout(function () {
        window.onresize = function () {
            fn3();
            myChart1.resize();
        }
    }, 2000)
//}
function randomFrom(lowerValue, upperValue) {
    return (Math.random() * (upperValue - lowerValue + 1) + lowerValue).toFixed(1);
}
function fn3() {//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    var height = document.getElementById("mac").offsetHeight
    var width = document.getElementById("mac").offsetWidth
}

aspx

其中js代码与上面相同
aspx代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PCP.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.8.1.min.js" type="text/javascript"></script>
    <style>
        body{
            background-color :black;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <div id="oee" style="width:300px;height:300px"></div>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script src="js/class/oee.js"></script>   
    </div>
    </form>
</body>
</html>

ashx

该文件用于连接数据库
ashx代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;

namespace PCP.cs
{
    /// <summary>
    /// Test03 的摘要描述
    /// </summary>
    public class Test03 : IHttpHandler
    {
        SqlConnection con = new SqlConnection("Data Source =192.168.1.1;Initial Catalog=test;User Id=sa;Password=sa");//连接sql数据库字符串
        DataSet ds = new DataSet();
        SqlDataAdapter adapter = new SqlDataAdapter();
        JavaScriptSerializer jsS = new JavaScriptSerializer();
        List<object> lists = new List<object>();
        //Series seriesObj = new Series();
        string result3 = "";
        public void ProcessRequest(HttpContext context)
        {
            //获取一同发送过来的参数
            //string command = context.Request["cmd"];
            context.Response.ContentType = "text/plain";
            //用来传回去的内容
            //context.Response.Write("Hello World");
            Get_Data03(context);
        }

        public void Get_Data03(HttpContext context)
        {
             string sql = @"exec proc_search_OEE1 @linn='z1' ,@Bc_Hour_day='Bc'";//自己写的预存程式，也可换为基本查询语言
            ds = GetDataFromDatabase(sql);
            lists = new List<object>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                var obj = new { OEE = dr["OEE"] };
                lists.Add(obj);
            }
            jsS = new JavaScriptSerializer();
            result3 = jsS.Serialize(lists);
            context.Response.Write(result3);
        }

        public DataSet GetDataFromDatabase(string sql)
        {
            ds = new DataSet();
            adapter = new SqlDataAdapter(sql, con);
            adapter.Fill(ds);
            return ds;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}