AJAX制作JSON格式的实时更新数据的方法

之前有写过这样的文章,但是出现了几个问题,第一,如果每秒都像数据库发送请求势必会造成服务器的压力过大,第二,如果使用JS的话,是不可以取得系统时间的,因为JS运行在客户端,所以只能取得客户端时间,

如此的话,就需要在后台计算好时间差,然后前台得到时间差进行倒计时计算,并且更新数据

JS代码如下:

 var i = 0;
    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 / (1000 * 60)) % 60;//分
        second = Math.floor(leftTime / 1000) % 60;//秒
        //把分钟和秒钟如果是一位数就变为两位数
        if (minute < 10) {
            minute = "0" + minute;
        }
        if (second < 10) {
            second = "0" + second;
        }
        //如果倒计时为负数,就设置为00:00
        if (leftTime < 0) {
            //$("#dendtime").html("00" + ":" + "00");//倒计时的时间,M表示分钟,S表示秒钟

        } else {
            $("#dendtime").html(minute + ":" + second);//倒计时的时间,M表示分钟,S表示秒钟
        }
        leftTime = (parseInt(leftTime) - 1000).toString();
    }
    /*-------------------------倒计时 end------------------------*/

    /*-------------------------显示开奖结果------------------------*/
    function showWinNum(msg) {
        $("#dendtime").html("00" + ":" + "00");//倒计时的时间,M表示分钟,S表示秒钟

        var numb1 = msg[0].getName.split("");//把期号分解成数组

        var numb2 = "";
        //把期号重新拆分处理
        for (var i = 0; i < numb1.length; i++) {
            numb2 = numb1[numb1.length - i - 1] + " " + numb2;
        }
        numb2 = numb2.substring(0, numb2.length - 1);//得到新的期号

        var numb3 = msg[0].getInfo.split(" ");//把球号分解成数组
        //这里暂时把跑号码球的方法变为直接显示号码球
        $("#num1").html("<li class=\"mt15\">" + numb3[0] + "</li>");
        $("#num2").html("<li class=\"mt15\">" + numb3[1] + "</li>");
        $("#num3").html("<li class=\"mt15\">" + numb3[2] + "</li>");
        $("#num4").html("<li class=\"mt15\">" + numb3[3] + "</li>");
        $("#num5").html("<li class=\"mt15\">" + numb3[4] + "</li>");
        var numb4 = "";
        //把球号重新拆分处理
        for (var i = 0; i < numb3.length; i++) {
            numb4 = numb3[numb3.length - i - 1] + "----------------------------------------------------" + numb4;
        }

        numb4 = numb4.substring(0, numb4.length - 1);//得到新的球号
        ballNum = msg[0].getInfo;//将数据库里面取到的号码球的值存入一个变量

        $("#num").html(msg[0].getName);//期号
        $("#nextNum").html(msg[0].getNum);//下一期的期号
        //后台运行语音报号
        setTimeout(play("第" + numb2 + "期开奖号码是" + numb4 + ",感谢您的关注"), 10);
    }
    /*-------------------------显示开奖结果 end------------------------*/

    /*-------------------------语音报号------------------------*/
    swfobject.embedSWF("Share/sampleDemo.swf", "sampleDemo", "0", "0", "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[0].getSysTime;
                    //首先倒计时
                    if (timer_showCountDown != null) {
                        clearInterval(timer_showCountDown);
                    }
                    timer_showCountDown = setInterval(showLeftTime, 1000);

                    //如果开奖结果有变化,则重新显示并报号
                    if (ballNum != msg[0].getInfo) {
                        showWinNum(msg);
                    }

                    //10秒调用一次AJAX方法更新数据
                    setTimeout(setTimeOutPost, 10000);
                }
            ,
            error: function (req) {
                //alert(req.readyState);//出错时提示出错状态
            }
        });
    }
    window.onload = function () {
        setTimeOutPost();
    }

后台代码如下:

 context.Response.ContentType = "application/json";

        string[] Info = new string[10];
        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[0] = reader["WinLotteryNumber"].ToString();
                Info[1] = reader["Name"].ToString();
                Info[2] = (Convert.ToInt32(Info[1].ToString().Substring(7, 2)) + 1).ToString();
                if(Info[2].Length<=1)
                {
                    Info[2] = "0" + Info[2];
                }
            }
            reader.Close();
        }
        using (SqlConnection Nowconn = new SqlConnection(ConStr))
        {
            Nowconn.Open();
            SqlCommand nowComm = new SqlCommand(GetNowTime, Nowconn);
            SqlDataReader NowReader = nowComm.ExecuteReader();
            while (NowReader.Read())
            {
                Info[3] = NowReader["EndTime"].ToString();
            }
            NowReader.Close();
        }
        TimeSpan dtime = Convert.ToDateTime(Info[3]) - Convert.ToDateTime(System.DateTime.Now);//开奖时间减去系统时间
        var outTime = (dtime.Minutes * 60000) + (dtime.Seconds * 1000) + 278000;//结果换算成毫秒数
        string obj = "[{\"getInfo\":\"" + Info[0] + "\",\"getName\":\"" + Info[1] + "\",\"getNum\":\"" + Info[2] + "\",\"getSysTime\":\"" + outTime + "\"}]";
        context.Response.Write(obj);
时间: 2024-11-07 00:50:08

AJAX制作JSON格式的实时更新数据的方法的相关文章

AJAX制作JSON格式的局部实时更新数据的方法

废话不多,上代码,前台: 主要使用了死循环一秒钟读取JS一次去刷新页面(递归的思想)单独对ShowData这个DIV的数据进行刷新 ,个人觉得还是需要优化的.请大神指点 <script type="text/javascript"> $(function () { var i = 0; function setTimeOutPost() { $.ajax({ type: "post", url: "/UserControl/DoData.ash

Django-choices字段值对应关系(性别)-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器-批量插入-07

目录 models 字段补充 choices 参数/字段(用的很多) MTV与MVC模型 科普 Ajax 发送 GET.POST 请求的几种常见方式 用 Ajax 做一个小案例 准备工作 动手用 Ajax 实现效果 contentType 前后端传输数据编码格式 ajax 提交数据 ajax发 json 格式数据 ajax 传文件 序列化组件 利用 sweetalert 搭建页面(弹窗) 弹窗中文支持不太好,手动修改样式 页面数据没刷新的问题 自定义分页器 批量插入测试数据 bulk_creat

spring mvc+ajax 实现json格式数据传递

使用ajax传递JSON对象 下面示例为ajax发送json对象,返回json格式数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 $.ajax({ url: "api/user", type: "POST", timeout: txnTimeOut, async: true, dataType: "json", data: {username : "lucy"}

ajax发送json格式数据

前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式 前段后交互 你不能骗人家,不然后端开发人员来找你的时候会抄着一根凳子腿. 你的数据时什么格式 你就应该准确无误告诉别人是什么格式 那么怎么告诉后端你要发送的数据的格式是什么呢 form 表单是通过 他的 enctype 而 ajax 是通过 contentType,如果你要传送的数据是json(通常只有json格式) 你需要这么写 contentType:'application/json' 要怎样发送一个json格式的数据呢

使用JSON实现股票信息实时更新

使用json实现股票信息实时更新 一.服务端代码 1.Stock.java package bean; public class Stock { private String code; private String name; private int price; public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getNam

Qt之模型/视图(实时更新数据)

上两节简单介绍了Qt中对于模型/视图的编程,大部分助手里说的很清楚了,现在就开始实战部分吧! 在实际应用中,视图展示的数据往往并非一成不变的,那么如何实时更新成了一个很重要的问题!功能:(1)添加委托(进度条)(2)显示文件名称.大小.进度.速度.剩余时间.状态等.(3)可进行添加.更新.删除.清空等操作.(4)实时更新数据先看一个效果图:委托(进度条):ProgressBarDelegate::ProgressBarDelegate(QObject *parent): QItemDelegat

ajax 提交 json格式数据到后台

例子:$.ajax({ type: 'POST', url: "/ROOT/modify.do", contentType: "application/json",//如果想以json格式把数据提交到后台的话,这个必须有,否则只会当做表单提交 data: JSON.stringify({"name":"sam","age":"12"}),//JSON.stringify()必须有,否则只

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-servlet.xml中相关配置: //命名空间加入mvc: xmlns:mvc="http://www.springframework.org/schema/mvc" //xsi:schemaLocation中补充: http://www.springframework.org/sche

ajax的json格式数据

什么是Ajax: 通过js语言跟后台进行交互的一个东西 -特点:异步,局部刷新 ajax往后台提交数据 $.ajax({ url:'请求的地址', type:'get/post', data:{key:value,key2:value2}, success:function(data){ alert(data) } }) 1 后台返回json格式 2 问?返回render,返回redirect? 基于ajax写一个登陆功能,一旦登陆成功,跳转到百度,登陆失败,在页面显示用户名或密码错误 总结: