C#曲线分析平台的制作（一，ajax+json前后台数据传递）
在最近的项目学习中，需要建立一个实时数据的曲线分析平台，这其中的关键在于前后台数据传递过程的学习，经过一天的前辈资料整理，大概有了一定的思路，现总结如下：
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 onclick="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="赞" onclick="zan()" /><label id="ZanCount"></label></p>
<p><input type="button" name="Cai" value="踩" onclick="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();
}
}
结果如下：
备注：本文代码非原创：
分别借鉴如下博客进行修改实现。
C#曲线分析平台的制作（一，ajax+json前后台数据传递）的更多相关文章
- C#曲线分析平台的制作（四，highcharts+ajax加载后台数据）
在上一篇博客:C#曲线分析平台的制作(三,三层构架+echarts显示)中已经完成了后台的三层构架的简单搭建,为实现后面的拓展应用开发和review 改写提供了方便.而在曲线分析平台中,往往有要求时间 ...
- C#曲线分析平台的制作（六，Sqldependency+Signalr+windows 服务）
在经过五天的学习和资料收集后,终于初步实现了利用sqldependency进行数据库变化监控,signalr进行前后台交互,数据实时更新.下面将源代码贴出进行初步分析: 1.系统整体框架构成: 2.具 ...
- C#曲线分析平台的制作（三，三层构架+echarts显示）
本文依据CSDN另一位网友关于三层构架的简单搭建,基于他的源码进行修改.实现了三层构架合理结构,以及从数据库中传递数值在echarts显示的实验目的. 废话不多说,show me codes: 具体构 ...
- C#曲线分析平台的制作（二，echarts前后台数据显示）
在上一篇博客中,学习了使用javascript和jquery两种方法来进行前后台交互.本篇博客着重利用jquery+echarts来实现从后台取数,从前端echarts中展示. 1.html页面编写: ...
- C#曲线分析平台的制作（五，Sqldependency+Signalr+windows 服务 学习资料总结）
在前篇博客中,利用interval()函数,进行ajax轮询初步的实现的对数据的实时显示.但是在工业级别实时显示中,这并非是一种最好的解决方案.随着Html5 websocket的发展,这种全双工的通 ...
- 测开之路一百五十四：ajax+json前后台数据交互
在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...
- 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net
练习 jquery+Ajax+Json 绑定数据
- ajax json struts JSP传递消息到action返回数据到JSP
ACTION package actions; import com.opensymphony.xwork2.ActionSupport; import net.sf.json.JSONObject; ...
- SpringMvc+ajax 实现json格式数据传递
传JSON对象 前端 function test () { var param = {username : "yitop"}; $.ajax({ timeout : 20000, ...
随机推荐
- oracle中job无法正常运行，如何排查
1.生产环境Oracle中的job无法正常运行 select * from dba_jobs_running;(查看正在运行的job) 2.select * from dba_jobs(查看job历史 ...
- Windows操作系统添加永久静态路由
1.比如:添加一条去往 10.10.10.0/24网段的静态路由,指定去往此网段的路由都走 172.20.153.254网关 route -p add 10.10.10.0 mask 255.255. ...
- mysql的主从复制延迟问题--看这一篇就够了
在之前我们已经讲解了一主一从,双主双从的mysql集群搭建,在单机应用的时候看起来没有问题,但是在企业的生产环境中,在很多情况下都会有复制延迟的问题. 主从复制的原理我们在此处就不再赘述了,之 ...
- @Autowired报错原因分析和4种解决方案！
上图的报错信息相信大部分程序员都遇到过,奇怪的是虽然代码报错,但丝毫不影响程序的正常执行,也就是虽然编译器 IDEA 报错,但程序却能正常的执行,那这其中的原因又是为何? 报错原因分析 报错的原因 ...
- 三剑客-sed
1.sed命令概述说明: 字符流编辑工具(行编辑工具) 2.sed命令作用说明: (1)擅长对行进行操作处理 (2)擅长将文件的信息进行修改调整/删除 3.sed具体功能 (1)文件中添加信息的能力( ...
- 15、oracle多表查询
15.0.实验建表: --父表 create table class( id number(10)constraint class_id_pk primary key, class_name varc ...
- 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」
uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...
- 【重学Java】Set集合
Set集合 Set集合概述和特点[应用] 无序不可重复 没有索引,不能使用普通for循环遍历.可以使用迭代器或者增强foreach语句遍历 TreeSet集合 TreeSet集合概述和特点[应用] 无 ...
- kafka错误集锦
javax.management.InstanceAlreadyExistsException: kafka.consumer:type=FetchRequestAndResponseMetrics, ...
- 第12次抽考（GUI）
1. package week4; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JTextFiel ...