C# JS 前后端互传数据

---恢复内容开始---

 

后端:

复制代码
 1 public void ProcessRequest(HttpContext context)
 2 {
 3 context.Response.ContentType = "text/plain";
 4 string IMEI = context.Request.QueryString["ID"];
 5 string currentDateTime = DateTime.Now.ToShortDateString();
 6 string cmd = "select TOP 20 温度,电池电压,电池电量,采集时间 from View_GPRS where 采集时间>'" + currentDateTime + "' and 设备号 ='" + IMEI + "' order by 采集时间 desc";
 7 // 访问数据库
 8 using (SqlDataReader reader = SqlHelper.ExcuteDataReader(cmd))
 9 {
10 if (reader.HasRows)
11 {
12 while (reader.Read())
13 {
14 
15 if (reader[0].ToString() == ""||reader[1].ToString()==""|| reader[2].ToString()==""|| reader[3].ToString()=="")
16 {
17 continue;
18 }
19 
20 //在第一个位置插入元素,相当于倒序排列,将元素从旧到新排序
21 energyInfo.Temp.Insert(0,Convert.ToDouble(reader[0]));//温度
22 energyInfo.BatteryVoltage.Insert(0,Convert.ToDouble(reader[1]));//电压
23 energyInfo.BatterySOC.Insert(0,Convert.ToDouble(reader[2]));//电量
24 DateTime colleTime = Convert.ToDateTime(reader[3].ToString()) ;
25 string sss = colleTime.ToString("T");
26 energyInfo.CollectionTime.Insert(0, colleTime.ToString("T"));//采集时间
27 
28 }
29 }
30 }
31 object JSONObj = JsonConvert.SerializeObject(energyInfo);
32 
33 //数据库内容转成json
34 context.Response.Write(JSONObj);
35 
36 }
View Code
复制代码

 

前端:

 

   

 if (selectedLayer === getLayerByTitle('企业')) {
       console.info('点击餐车图层上的点,跳转页面到折线图');
      var IMEI = dic_values['IMEI'];
      //跳转,将feature的属性数据传递到新页面
     //window.location.href = 'Details.aspx?name=' + name;
      window.open('Details.aspx?name=' + IMEI);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<br><br>//获取url中的参数
       function getQueryParams() {
           var search = window.location.search;
           var params = {};
           if (search != "") {
               search.slice(1).split("&").forEach(
                   function (val) {
                       var arr = val.split("=");
                       params[arr[0]] = arr[1];
                   }
               );
           }
           return params;
       }
//获取url中的参数
       var params = getQueryParams();
       var query = decodeURI(params['name']);
 
$.ajax({
               type: "GET",
               url: ' Handler2.ashx?ID=' + query,
               contentType: "application/json",
               data: {},
               success: function (res) {
                    jsondata = JSON.parse(res);
                   console.log('取到设备的温度,电压,电量数据');
                   console.log(jsondata)
                    
                   option1.series[0].data = jsondata.Temp;//餐车温度
                   option1.xAxis[0].data = jsondata.CollectionTime;
                   option2.series[0].data = jsondata.BatteryVoltage;//电池电压
                   option2.xAxis[0].data = jsondata.CollectionTime;
                   option3.series[0].data = jsondata.BatterySOC;//电池电量
                   option3.xAxis[0].data = jsondata.CollectionTime;//采集时间
                   myChart1.setOption(option1);
                   myChart2.setOption(option2);
                   myChart3.setOption(option3);
               },
 
           });

  

---恢复内容结束---

posted @   Youse的二分口粮地  阅读(872)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· Vue3状态管理终极指南:Pinia保姆级教程
点击右上角即可分享
微信分享提示