.net编程--Jquery异步定时器的使用

最新推荐文章于 2022-06-08 10:04:59 发布

溪午X

最新推荐文章于 2022-06-08 10:04:59 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/qq_37855507/article/details/87967780

版权

前端HTML页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JQuery定时器.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="JQuery/jquery.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="height:10em;margin-top:5em;">
            <div style="text-align:center;margin:0,auto,0,auto;width:80%">
               <h2>桥梁最新挠度数据：</h2>
                 <table style="text-align:center;margin:0,auto,0,auto;width:60%">
                     <tr>
                        <td>
                           x方向桥梁挠度
                        </td>
                        <td>
                           y方向桥梁挠度
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <input type="text" id="x_direction" value="0"/>
                        </td>
                        <td>
                           <input type="text" id="y_direction" value="0"/>
                        </td>
                    </tr>
                </table>
                <input type="text" id="time"/>
             </div>
            <div id="highchart" style="width: 600px;height:400px;">
            </div>
        </div> 
    </form>
</body>

jQuery 异步AJAX代码：

    <script type="text/javascript">
        //全局参数，针对所有的Highcharts图表生效的配置，只能通过Highcharts.setOption函数来配置
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        var xdata = document.getElementById('x_direction');
        var ydata = document.getElementById('y_direction');
        var time = document.getElementById('time');
        function TimeProcess() {
            setInterval(function () {
                $.ajax({
                    url: "JQTimer1.ashx",
                    type: "Get",
                    data: "0",
                    cache: false,
                    success: function (data) {
                        xdata.value = data.x_data;
                        ydata.value = data.y_data;
                        time.value = data.Time_data;
                        options.series[0].data = data.x_data;
                    },
                    dataType:'json',
                });
            }, 1000);
        }
        TimeProcess();
    </script>
</html>

一般处理程序：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using MySql.Data.MySqlClient;
using Newtonsoft.Json;


namespace JQuery定时器
{
    /// <summary>
    /// JQTimer1 的摘要说明
    /// </summary>
    public class JQTimer1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string[] newBridgeData = new string[3];
            newBridgeData = GetBridgeData();
            string jsonData = "{\"x_data\":\"" + newBridgeData[0].ToString() + "\",\"y_data\":\"" + newBridgeData[1].ToString() + "\",\"Time_data\":\"" + newBridgeData[2].ToString() + "\"}";
            context.Response.ContentType = "text/plain";
            context.Response.Write("{\"x_data\":\"" + newBridgeData[0].ToString() + "\",\"y_data\":\"" + newBridgeData[1].ToString() + "\",\"Time_data\":\"" + newBridgeData[2].ToString() + "\"}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public string[] GetBridgeData()
        {
            //数组得到桥梁挠度的两个数据
            string[] bridgemap = new string[3];
            //1. 连接字符串
            string constr = "Server=localhost;Data Source=127.0.0.1;User ID=root;Password=root;DataBase=bridgemap;Charset=utf8;";
            using(MySqlConnection con=new MySqlConnection (constr))
            {
                //数据库查询操作
                string str = "select x_deflection,y_deflection,time_info from bridgemap_2   order by id desc LIMIT 1";
                using(MySqlCommand cmd=new MySqlCommand (str,con))
                {
                    //打开连接
                    con.Open();
                    using(MySqlDataReader reader=cmd.ExecuteReader())
                    {
                        if(reader.HasRows)
                        {
                            if(reader.Read())
                            {
                                bridgemap[0] = reader.GetString(0);
                                bridgemap[1] = reader.GetString(1);
                                bridgemap[2] = reader.GetString(2);
                            }
                        }
                    }
                }
            }
            return bridgemap;
        }
    }
}