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, ...
随机推荐
- 强烈推荐！15 个Github 顶级Java教程类开源项目
大家好,我是 Guide 哥!今天给大家推荐 15 个新手也能看懂的 Java 教程方向的开源项目.这些项目无论是对于你学习 Java 还是准备 Java 方向的面试都非常有帮助. 正如我第一个要推荐 ...
- Linux关闭打开防火墙命令
Linux下打开和关闭防火墙 1.及时生效,重启后复原 关闭:service iptables stop 开启:service iptalbes start 查看状态:service iptabl ...
- Pytest学习笔记7-skip和skipif的使用
前言 在实际的测试中,我们经常会遇到需要跳过某些测试用例的情况,pytest提供了skip和ifskip来跳过测试 下面我们就来通过一些例子看看skip和ifskip具体如何使用吧 skip的用法 使 ...
- 5、SpringBoot整合之SpringBoot整合MybatisPlus
SpringBoot整合MybatisPlus 目录(可点击直接跳转,但还是建议按照顺序观看,四部分具有一定的关联性): 实现基础的增删改查 实现自动填充功能 实现逻辑删除 实现分页 首先给出四部分完 ...
- Oracle数据库——Mybatis在一个update标签下执行多更新语句
begin update table table1 set com1 ='1' ; update table table2 set com1 ='1' ; end;
- oracle sqlldr导入数据和导入去除空格
1.新建目录E:\load把需要导入的数据文件放到目录下面 这是我自己造的测试数据... 2.在文件下新建脚本文件 Load data infile 'E:\load\info.txt' into t ...
- 国内CRM客户管理系统哪个好用
在企业管理者对CRM系统进行选择的时候,面对搜索引擎上各种各样的结果和各种广告,肯定会有这样的疑问:CRM客户管理系统到底是哪一个好?除了网络上那些为了广告效果而"夸大其词"的优点 ...
- AcWing 341. 最优贸易
C国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市. 任意两个城市之间最多只有一条道路直接相连. 这 m 条道路中有一部分为单向通行的道路,一部分为双向通行的道路,双向通行的 ...
- promise的基本使用
// 什么情况下适用promise? // 一般情况下是有异步请求操作时,使用promise对这个异步操作进行封装 // new ->构造函数(1.保存了一些状态信息 2.执行传入的函数) // ...
- 并发王者课-铂金10：能工巧匠-ThreadLocal如何为线程打造私有数据空间
欢迎来到<并发王者课>,本文是该系列文章中的第23篇,铂金中的第10篇. 说起ThreadLocal,相信你对它的名字一定不陌生.在并发编程中,它有着较高的出场率,并且也是面试中的高频面试 ...