AJAX制作JSON格式的实时更新数据的方法
之前有写过这样的文章,但是出现了几个问题,第一,如果每秒都像数据库发送请求势必会造成服务器的压力过大,第二,如果使用JS的话,是不可以取得系统时间的,因为JS运行在客户端,所以只能取得客户端时间,
如此的话,就需要在后台计算好时间差,然后前台得到时间差进行倒计时计算,并且更新数据
JS代码如下:
var i = ;
var ballNum = "";
var flag = true;
var timer_showCountDown = null;
var leftTime; function showLeftTime(){
ShowCountDown(leftTime);
} /*-------------------------倒计时------------------------*/
function ShowCountDown(sysTime) {
console.warn(sysTime);
var minute, second;
if (isNaN(leftTime)) {
leftTime = sysTime;
} else {
leftTime = sysTime;
}
minute = Math.floor(leftTime / ( * )) % ;//分
second = Math.floor(leftTime / ) % ;//秒
//把分钟和秒钟如果是一位数就变为两位数
if (minute < ) {
minute = "" + minute;
}
if (second < ) {
second = "" + second;
}
//如果倒计时为负数,就设置为00:00
if (leftTime < ) {
//$("#dendtime").html("00" + ":" + "00");//倒计时的时间,M表示分钟,S表示秒钟 } else {
$("#dendtime").html(minute + ":" + second);//倒计时的时间,M表示分钟,S表示秒钟
}
leftTime = (parseInt(leftTime) - ).toString();
}
/*-------------------------倒计时 end------------------------*/ /*-------------------------显示开奖结果------------------------*/
function showWinNum(msg) {
$("#dendtime").html("" + ":" + "");//倒计时的时间,M表示分钟,S表示秒钟 var numb1 = msg[].getName.split("");//把期号分解成数组 var numb2 = "";
//把期号重新拆分处理
for (var i = ; i < numb1.length; i++) {
numb2 = numb1[numb1.length - i - ] + " " + numb2;
}
numb2 = numb2.substring(, numb2.length - );//得到新的期号 var numb3 = msg[].getInfo.split(" ");//把球号分解成数组
//这里暂时把跑号码球的方法变为直接显示号码球
$("#num1").html("<li class=\"mt15\">" + numb3[] + "</li>");
$("#num2").html("<li class=\"mt15\">" + numb3[] + "</li>");
$("#num3").html("<li class=\"mt15\">" + numb3[] + "</li>");
$("#num4").html("<li class=\"mt15\">" + numb3[] + "</li>");
$("#num5").html("<li class=\"mt15\">" + numb3[] + "</li>");
var numb4 = "";
//把球号重新拆分处理
for (var i = ; i < numb3.length; i++) {
numb4 = numb3[numb3.length - i - ] + "----------------------------------------------------" + numb4;
} numb4 = numb4.substring(, numb4.length - );//得到新的球号
ballNum = msg[].getInfo;//将数据库里面取到的号码球的值存入一个变量 $("#num").html(msg[].getName);//期号
$("#nextNum").html(msg[].getNum);//下一期的期号
//后台运行语音报号
setTimeout(play("第" + numb2 + "期开奖号码是" + numb4 + ",感谢您的关注"), );
}
/*-------------------------显示开奖结果 end------------------------*/ /*-------------------------语音报号------------------------*/
swfobject.embedSWF("Share/sampleDemo.swf", "sampleDemo", "", "", "9.0.0", "Share/expressInstall.swf");
function play(c) {
var item = {};
item.text = c;
swfobject.getObjectById("sampleDemo").onSynthsize(item);
}
/*-------------------------语音报号 end------------------------*/ function setTimeOutPost() {
$.ajax({
type: "post",
url: "/Lottery/DoDataMethod/GetKLCData.ashx",
dataType: "json",
async: true,
success:
function (msg) {
leftTime = msg[].getSysTime;
//首先倒计时
if (timer_showCountDown != null) {
clearInterval(timer_showCountDown);
}
timer_showCountDown = setInterval(showLeftTime, ); //如果开奖结果有变化,则重新显示并报号
if (ballNum != msg[].getInfo) {
showWinNum(msg);
} //10秒调用一次AJAX方法更新数据
setTimeout(setTimeOutPost, );
}
,
error: function (req) {
//alert(req.readyState);//出错时提示出错状态
}
});
}
window.onload = function () {
setTimeOutPost();
}
后台代码如下:
context.Response.ContentType = "application/json";
string[] Info = new string[];
string ConStr = ConfigurationManager.AppSettings["ConnectionString"].ToString();
//得到上期开出的数据
string GetDate = @"
SELECT
TOP 1
[ID]
,[LotteryID]
,[Name]
,[StartTime]
,[EndTime]
,[ChaseExecuted]
,[IsOpened]
,[WinLotteryNumber]
,[OpenOperatorID]
,[State]
,[StateUpdateTime]
,[OpenAffiche]
FROM [T_Isuses]
WHERE EndTime<getdate() and WinLotteryNumber<>'' and [IsOpened]=1
ORDER BY [EndTime] desc
";
//得到本期的时间
string GetNowTime = @"
SELECT
TOP 1
[ID]
,[LotteryID]
,[Name]
,[StartTime]
,[EndTime]
,[ChaseExecuted]
,[IsOpened]
,[WinLotteryNumber]
,[OpenOperatorID]
,[State]
,[StateUpdateTime]
,[OpenAffiche]
FROM [T_Isuses]
WHERE IsOpened=0 and EndTime>(
SELECT
TOP 1
[EndTime]
FROM [T_Isuses]
WHERE EndTime<getdate() and WinLotteryNumber<>'' and [IsOpened]=1 and LotteryID=79
ORDER BY [EndTime] desc
) and LotteryID=79 order by Name
";
using (SqlConnection conn = new SqlConnection(ConStr))
{
conn.Open();
SqlCommand comm = new SqlCommand(GetDate, conn);
SqlDataReader reader = comm.ExecuteReader();
while (reader.Read())
{
Info[] = reader["WinLotteryNumber"].ToString();
Info[] = reader["Name"].ToString();
Info[] = (Convert.ToInt32(Info[].ToString().Substring(, )) + ).ToString();
if(Info[].Length<=)
{
Info[] = "" + Info[];
}
}
reader.Close();
}
using (SqlConnection Nowconn = new SqlConnection(ConStr))
{
Nowconn.Open();
SqlCommand nowComm = new SqlCommand(GetNowTime, Nowconn);
SqlDataReader NowReader = nowComm.ExecuteReader();
while (NowReader.Read())
{
Info[] = NowReader["EndTime"].ToString();
}
NowReader.Close();
}
TimeSpan dtime = Convert.ToDateTime(Info[]) - Convert.ToDateTime(System.DateTime.Now);//开奖时间减去系统时间
var outTime = (dtime.Minutes * ) + (dtime.Seconds * ) + ;//结果换算成毫秒数
string obj = "[{\"getInfo\":\"" + Info[] + "\",\"getName\":\"" + Info[] + "\",\"getNum\":\"" + Info[] + "\",\"getSysTime\":\"" + outTime + "\"}]";
context.Response.Write(obj);
需要注意的是JSON格式的数据返回的时候要带中括号,不然前台页面会找不到数据的
AJAX制作JSON格式的实时更新数据的方法的更多相关文章
- Django-choices字段值对应关系(性别)-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07
目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Aj ...
- ajax发送json格式与文件数据、django自带的序列化器(了解)
上期内容回顾 聚合查询和分组查询 # 聚合查询 max min sum avg count # 查询关键字:aggregate from django.db.models import Max, Mi ...
- 数据可视化:Echart中k图实现动态阈值报警及实时更新数据
1 目标 使用Echart的k图展现上下阈值,并且当真实值超过上阈值或低于下阈值时候,标红报警. 2 实现效果 如下:
- 实时更新数据的jQuery图表插件DEMO演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Qt之模型/视图(实时更新数据)
上两节简单介绍了Qt中对于模型/视图的编程,大部分助手里说的很清楚了,现在就开始实战部分吧! 在实际应用中,视图展示的数据往往并非一成不变的,那么如何实时更新成了一个很重要的问题!功能:(1)添加委托 ...
- 在PHP代码中处理JSON 格式的字符串的两种方法:
总结: 在PHP代码中处理JSON 格式的字符串的两种方法: 方法一: $json= '[{"id":"1","name":"\u ...
- springmvc4.0配置ajax请求json格式数据
1.导入相关jar包:jackson-annotation-2.5.4.jar,jackson-core-2.5.4.jar,jackson-databind-2.5.4.jar. 2.spring- ...
- SpringMvc+ajax 实现json格式数据传递
传JSON对象 前端 function test () { var param = {username : "yitop"}; $.ajax({ timeout : 20000, ...
- ajax 提交 json格式数据到后台
例子:$.ajax({ type: 'POST', url: "/ROOT/modify.do", contentType: "application/json" ...
随机推荐
- echarts地图点定位的问题
1,生成地图 2,如果需要产生地图上的点位,需要在配置中传入geoCoord具体数据为一下: { "海门": [121.15, 31.89], "鄂尔多斯": ...
- C语言之复杂指针详解
在<C陷阱与缺陷>第二章第一节中有这样一个声明: (*(void(*)())0)(): 看到这样的表达式估计让不少人都“不寒而栗”了吧,其实虽然看起来复杂,但是构造这类表达式其实只有一条简 ...
- (一)线性回归与特征归一化(feature scaling)
线性回归是一种回归分析技术,回归分析本质上就是一个函数估计的问题(函数估计包括参数估计和非参数估计),就是找出因变量和自变量之间的因果关系.回归分析的因变量是应该是连续变量,若因变量为离散变量,则问题 ...
- RequireJS入门指导 (转)
最近在百度实习做的一个项目用到了 Require JS 这个库,之前从来没有了解过,经过一番大概的搜索后找到一篇非常不错的文章,看完后能够让你对 Require JS 的运行机制.使用方法以及为什么使 ...
- oracle sql语句跟踪
select b.SQL_TEXT,b.FIRST_LOAD_TIME,b.SQL_FULLTEXT from v$sqlarea b order by b.FIRST_LOAD_TIM ...
- Nginx - Windows下Nginx基本安装和配置
Nginx 是一个轻量级的高性能 Http WebServer,以事件驱动方式编写,因此相比 Apache 而言,Nginx 更加稳定.性能更好,而且配置简单,资源占用较低. 1. 安装 Nginx ...
- selenium python (三)鼠标事件
# -*- coding: utf-8 -*-#鼠标事件 #ActionChains类中包括: # context_click() 右击: ...
- GitHub使用教程及常见错误解决
1.下载Git并安装 Git for Windows Git-1.8.4-preview20130916.exe 按照默认步骤完成安装 2.设置SSH建立计算机与Github的链接 2.1 点击 开始 ...
- kali工具学习
使用前的准备 开启/关闭 HTTP服务 Service apache2 start/stop 自动启动HTTP服务:update-rc.d apache2 defaults 开启/关闭 mysql S ...
- Nodejs_day02
Nodejs的事件模块 var events = require('events'); var eventEmitter = new events.EventEmitter();//创建EventEm ...