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, ...
随机推荐
- csp-s模拟测试50(9.22)「施工（单调栈优化DP）」·「蔬菜（二维莫队？？？）」·「联盟（树上直径）」
改了两天,终于将T1,T3毒瘤题改完了... T1 施工(单调栈优化DP) 考场上只想到了n*hmaxn*hmaxn的DP,用线段树优化一下变成n*hmaxn*log但显然不是正解 正解是很**的单调 ...
- 2、SpringBoot整合之SpringBoot整合servlet
SpringBoot整合servlet 一.创建SpringBoot项目,仅选择Web模块即可 二.在POM文件中添加依赖 <!-- 添加servlet依赖模块 --> <depen ...
- 45、screen命令
1.screen命令介绍: 当我们在使用linux远程工具进行远程访问服务器时,进行远程访问的界面往往不能关掉,否则程序将不再运行.而且,程序 在运行的过程中,还必须时刻保证网络的通常,这些条件都很难 ...
- 7、解决windows10家庭版无法远程连接服务器的问题
(1)方法一: 升级windows10为专业版,因为win10家庭版没有组策略: (2)方法二:通过远程命令: 同时按住"win+r"键调出"运行",在方框内输 ...
- Visual Studio 2010 SP1 中文升级补丁ISO完整版下载 (含多国语言)
最近事情比较多,差点忘记了这个VS2010 SP1的升级补丁更新了,程序员们赶快更新吧!这次发布的SP1包含了下列语言:英文,简体中文,繁体中文,法语,德语,印度语,日语,韩语,俄语以及西班牙语. V ...
- kmp算法 汇总
来源:http://blog.csdn.net/qq_34494458/article/details/75253466 KMP算法,是由Knuth,Morris,Pratt共同提出的模式匹配算法,其 ...
- Machine Schedule 赤裸裸的二分匹配 二部图中的点覆盖书==匹配数
Machine Schedule 1 #include <iostream> 2 #include <cstdio> 3 #include <cstring> 4 ...
- Jmeter之cokie管理器和http默认值
根据上文中,都配置好以后就可以开始启动了,点击启动,线程组里面就会开始记录你的网页请求.这里使用CNode网站做测试.我分别记录进行了"登入","话题创建",& ...
- cobbler安装4个报错汇总及解决方法：ImportError
安装完,检查cobbler:cobbler check发现这个问题ImportError: No module named yaml 具体报错如下: [root@www localdisk]# cob ...
- WPF教程一：创建Hello world来理解XAML的内容及编译
在实际的WPF开发中遇到很多再用Winform写法来写WPF的开发人员,很多时候项目进度延期.出现非必要的BUG等等.大多是因为开发人员虽然是再写WPF. 但是没有好好的学过WPF,就导致无法发挥出W ...