C#曲线分析平台的制作（一，ajax+json前后台数据传递）
2024-05-23 10:56:34
在最近的项目学习中，需要建立一个实时数据的曲线分析平台，这其中的关键在于前后台数据传递过程的学习，经过一天的前辈资料整理，大概有了一定的思路，现总结如下：
1.利用jquery下ajax函数实现：
<script src="Scripts/jquery-3.3.1.min.js"></script><script type="text/javascript">function checkLogin() {var name = $("#name").val();var passward = $("#password").val();console.log(name);console.log(passward);$.ajax({url: 'Default.aspx?method=login',type: 'GET',data: { "name": name, "passward": passward },dataType: 'json',success: function (dataInfo) {if (dataInfo.status) {console.log(dataInfo.data);//前台接收到的数据中data是字符串，需要转换为JSON对象var jsondata = JSON.parse(dataInfo.data);//反序列化alert("登陆成功，用户名是：" + jsondata.name + " 性别是：" + jsondata.sex + " 年龄是：" + jsondata.age);} else {alert("登陆失败");}},async: false});}</script> <body> <form id="form1" runat="server"><div><input id="name" type="text" /><input id="password" type="password" /><button οnclick="checkLogin()" value="">提交</button></div></form></body>后台脚本：
protected void Page_Load(object sender, EventArgs e){string method = Request.QueryString["method"];string name = Request.QueryString["name"];string passward = Request.QueryString["passward"];if (!string.IsNullOrEmpty(method)){if (method == "login"){GetLogin(name, passward);}}}private void GetLogin(string name, string passward){CommonModel msg = new CommonModel();//这里有没有登陆成功可以连接数据库判断if (name == "admin" && passward == "admin"){//这里是可以从数据库获取出来的登陆用户的信息var jsonData = "{ \"name\":\"管理员\", \"sex\":\"男\", \"age\":\"20\"}";msg.status = true;msg.msg = "登陆成功";msg.data = jsonData;}else{msg.status = false;msg.msg = "失败";}object JSONObj = JsonConvert.SerializeObject(msg);//序列化传递Response.Write(JSONObj);//一定要加，不然前端接收失败Response.End();}class CommonModel//构造实体类{//状态private bool _statues;public bool status{get { return _statues; }set { _statues = value; }}//消息private string _msg;public string msg{get { return _msg; }set { _msg = value; }}//数据private object _data;public object data{get { return _data; }set { _data = value; }}}
2.利用原生javascript下的ajax：
ajax.js
function ajax(url, onsuccess) {var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性xmlhttp.open("POST", url, true);//准备向服务器发出post请求xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）{if (xmlhttp.status == 200) //状态码200位成功{//responseText是服务器返回的报文正文onsuccess(xmlhttp.responseText);}else {alert("ajax服务器返回错误");}}}xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">function zan() {var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');//创建xmlhttp对象，考虑兼容性xmlhttp.open("POST", "AjaxTest.ashx?action=Zan", true);//准备向服务器发出post请求xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4) //readyState==4表示服务器返回数据了额，之前可能经历 2（请求已发生，正在处理中）3表示（响应中有部分数据可以用，拂去其还没有完成响应的生成）{if (xmlhttp.status == 200) //状态码200位成功{document.getElementById("ZanCount").innerHTML = xmlhttp.responseText;//responseText是服务器返回的报文正文}else {alert("ajax服务器返回错误");}}}xmlhttp.send();//这时才发送请求，发送完请求，并一定马上服务器响应，然后看上面的onreadystatechange状态，发送完继续执行下面的操作，不等服务器}function cai() {ajax("AjaxTest.ashx?action=Cai", function (reText) {document.getElementById("CaiCount").innerHTML = reText;})}</script><title></title></head>
<body><video src="src/a.mp4" controls="controls"></video><p><input type="button" name="Zan" value="赞" οnclick="zan()" /><label id="ZanCount"></label></p><p><input type="button" name="Cai" value="踩" οnclick="cai()" /><label id="CaiCount"></label></p>
</body>
</html>新建应用程序AjaxTest.ashx
<%@ WebHandler Language="C#" Class="Handler" %>using System;
using System.Web;
using System.Data;public class Handler : IHttpHandler {public void ProcessRequest (HttpContext context) {string action = context.Request["action"];if (action == "Zan"){SqlHelper.ExecuteNonQuery("Update T_ZanCai set ZanCount=ZanCount+1");int zanCount = (int)SqlHelper.ExecuteScalar("select top 1 ZanCount from T_ZanCai");context.Response.Write(zanCount);}else{SqlHelper.ExecuteNonQuery("Update T_ZanCai set CaiCount=CaiCount+1");int caiCount = (int)SqlHelper.ExecuteScalar("select top 1 CaiCount from T_ZanCai");context.Response.Write(caiCount);}}public bool IsReusable {get {return false;}}}数据库结构：
注：
1.数据库连接webconfig下connectionstring
<connectionStrings><add name="dbConn" connectionString="Data Source=.;Database=test;Trusted_Connection=false;User ID=sa;Password=" providerName="System.Data.SqlClient"/></connectionStrings>2.简单的测试SqlHelper类的编写：
private static string connStr = ConfigurationManager.ConnectionStrings["dbConn"].ConnectionString;public static int ExecuteNonQuery(string sql){using (SqlConnection conn = new SqlConnection(connStr)){conn.Open();using (SqlCommand cmd = conn.CreateCommand()){cmd.CommandText = sql; //foreach (SqlParameter param in parameters)//{// cmd.Parameters.Add(param);//}// cmd.Parameters.AddRange(parameters);return cmd.ExecuteNonQuery();}}}public static object ExecuteScalar(string sql){using (SqlConnection conn = new SqlConnection(connStr)){conn.Open();using (SqlCommand cmd = conn.CreateCommand()){cmd.CommandText = sql;// cmd.Parameters.AddRange(parameters);return cmd.ExecuteScalar();}}结果如下：
备注：本文代码非原创：
分别借鉴如下博客进行修改实现。
点击打开链接
点击打开链接
转载于:https://www.cnblogs.com/cache-yuan/p/9218449.html
C#曲线分析平台的制作（一，ajax+json前后台数据传递）相关推荐
- C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）
在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...
- 运维大数据可视化分析平台来了，枯燥运维数据也可以生动起来
数字时代监控运维系统数据量暴增,指标.日志.代码堆栈.网络数据包等等时间序列数据从每天几百兆采集量膨胀到每天上百GB,上TB.由于故障总是偶发,而监控数据在故障发生回朔时才更有价值. 如何利用这些低价 ...
- jsp中jquery传值给Java_jsp中利用jquery+ajax在前后台之间传递json格式参数
经过一段时间的实验琢磨,终于将前后台之间的参数传递搞定了,实验所用工具myeclipse+structs1.2. 总结:容易出错的地方:1.ajax中data的格式一定要写对,这里举了两种形式,一种是 ...
- 三大流行BI分析平台推荐，企业数据化选择工具
进入大数据时代以来,对于企业来说,海量的数据不仅是财富,也是负担.无论是大型企业还是小型企业,都面临着同样的挑战--如何利用大数据客户体验,有效达到优化生产力的效果.这也是近年来许多企业选择搭建现代大 ...
- 一款开源的数据可视化分析平台，提供多种大屏模板，非常炫酷
点击关注公众号,实用技术文章及时了解 DataGear是一款开源的数据可视化分析平台,可自由制作任何您想要的数据可视化看板,支持接入SQL.CSV.Excel.HTTP接口.JSON等多种数据源.系统 ...
- 大数据挖掘与分析平台整体解决方案
大数据挖掘与分析平台 ...
- 4.5k star，一款开源的数据可视化分析平台，提供多种大屏模板，非常炫酷
点击关注公众号,实用技术文章及时了解 DataGear是一款开源的数据可视化分析平台,可自由制作任何您想要的数据可视化看板,支持接入SQL.CSV.Excel.HTTP接口.JSON等多种数据源.系统 ...
- SpreadJS 纯前端表格控件应用案例：金融业数据智能分析平台
由北京海创研发的金融业数据智能分析平台,通过嵌入 SpreadJS,实现了基于Web的数据采集.自助式报表设计与浏览.灵活查询.自主分析和数据预测等功能,简洁.易用,有效解决了用户数据填报.查询和分析 ...
- 科技兴关，荣联与天津海关共建基因组数据库及分析平台
快速准确的鉴定物种一直是基因组进化和物种鉴别中的一大挑战,在海关口岸业务中,濒危动植物制成品形态多样,物种鉴别困难,口岸生物安全防控形势更加严峻,进一步强化海关物种鉴定能力.提升基因信息分析效率成为科 ...
- html不需要编译就可以直接运行,分析php应用软件性能的诊断系统及其方法和性能管理平台的制作方法...
分析php应用软件性能的诊断系统及其方法和性能管理平台的制作方法 [技术领域] [0001]本发明涉及软件应用性能管理(AMP)技术,尤其涉及一种分析超文本预处理器(Hypertext Preproc ...
最新文章
- 潜入java内存结构
- SQL性能--left join和inner join的运行速度与效率
- Oracle-修改用户密码为UNLIMITED
- pilt图像处理_详解python opencv、scikit-image和PIL图像处理库比较
- 用户请求队列化_爬虫架构消息队列应用场景及ActiveMQ、RabbitMQ、RocketMQKafka
- uvali5697(DP)
- MacOS12.3M1出现程序killed的一些想法
- k8s架构及服务详解
- C#使用并行任务库(TPL)
- babel css3新特性_css3 transform属性多值的顺序问题
- 智能化施工（综合管线）
- 邮件服务器1---原理以及基本概念
- 在线免费制图云平台架构
- 蓝湖能导入html文件么,axure怎么导入蓝湖
- Redmine 父子问题树形结构显示技巧
- HTML正方体滚动特效
- G-Q检验异方差存在及在Eviews的实现
- 十天学会单片机Day5 IIC总线AT2402芯片(EEPROM)应用
- 小程序开发经验分享（2）前端开发
- 冷门绝技，让你的Origin坐标轴“断掉”