Json数据异步绑定到界面的Table并且自动刷新

来源：互联网发布：若风淘宝编辑：程序博客网时间：2024/05/18 01:44

做Winform习惯了，大家都习惯设置datasource这样的写法。

如果想实现页面定时刷新的话，用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的。这样做加入了很多你不能控制的元素，举个例子说就是：用updatepanel后，你设置的样式很有可能就变了，然后你还需要去调这些。所以还是用一些自己控制性高的代码比较合适。

今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧。

首先来看一下我的一般处理程序，在这个里面，我自己实现的是从数据库中查出datatable，然后转换成json传输给客户端

/// <summary>    /// getData 的摘要说明    /// </summary>    public class getData : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            //context.Response.Write("Hello World");            //设置查询字符串            string strSql = "select ckrID,chrCarNumber,cncName,bcrName from T_CarNumberCategory,T_CheckResult,t_BusinessCategory where ckrcheckresult is null and cncID=ckrcarnumbercategoryid and ckrBusinessCategory=bcrID";            //设置连接字符串            string strConn = "Data Source=(DESCRIPTION=(ADDRESS=(PROTOCOL=TCP)(HOST=192.168.24.173)(PORT=1521))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User Id=admin;Password=123123";            //定义并打开数据库连接            OracleConnection conn = new OracleConnection(strConn);            conn.Open();            //定义命令行对象，            OracleCommand cmd = new OracleCommand(strSql, conn);            //定义一个适配器，用来填充Datatable            ;            OracleDataAdapter adp = new OracleDataAdapter(cmd);            //定义一个DataTable并用适配器对其进行填充            DataTable dt = new DataTable();            adp.Fill(dt);            context.Response.Write(JsonConvert.SerializeObject(dt));            //上面的是我从数据库中查询到的datatable，然后用一个Json操作类库将其转换为Json            ////由于大家没有数据库环境，我把上面的字符串复制出来，供大家测试实验用            ////由于复制出来是双引号，放这里会报个错误，所以我改成单引号了            ////但是客户端在获取json的时候，是认双引号的，所以不得不再替换回来。。。心碎            //var json = "[{'CKRID':'1359374764563','CHRCARNUMBER':'123123','CNCNAME':'大型汽车','BCRNAME':'核发检验合格标志'},{'CKRID':'1359371470153','CHRCARNUMBER':'asdfsadf','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359343210678','CHRCARNUMBER':'111222','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359354395618','CHRCARNUMBER':'123asd','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355217314','CHRCARNUMBER':'123asdqwe','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355356271','CHRCARNUMBER':'1111111','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1359355490374','CHRCARNUMBER':'123123123','CNCNAME':'大型汽车','BCRNAME':'注册登记'},{'CKRID':'1358074597852','CHRCARNUMBER':'323232','CNCNAME':'使馆汽车','BCRNAME':'核发检验合格标志'}]";            //context.Response.Write(json.Replace('\'','\"'));        }        public bool IsReusable        {            get            {                return false;            }        }    }

上面的服务器端程序中的注释很详细，有不懂的可以留言说明。类库的用的是Newtonsoft.Json.dll。大家点击即可从我的网盘里下载——不要任何费用哦~亲

下面是客户端代码：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>测试</title>    <script src="jquery-1.7.1.js" type="text/javascript"></script></head><body>    <form id="form1" runat="server">    <table id="data">        <tr id="tem">            <td id="ID">                流水号            </td>            <td id="CarNumber">                车牌号            </td>            <td id="BusinessName">                业务类型            </td>            <td id="btn">                <input id="Button2" type="button" value="button" />            </td>        </tr>    </table>    <div id="loading">        正在加载数据...    </div>    <script type="text/jscript">        //模拟一个数据正在加载的样子        setTimeout(function () { $("#loading").hide(); }, 1000);        //设置定时器定时调用方法，单位是毫秒        setInterval(SetData(), 1000);        //从服务器端获取数据，并显示到界面上,用getJSON方法实现        function SetData() {            $.getJSON("getData.ashx", null, function (obj) {                $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除                //将获取到的数据动态的加载到table中                for (var i = 0; i < obj.length; i++) {                    //将第四条的ID设置为红色（此处可以用来根据内容修改样式                    if (i == 3) {                        row.find("#ID").css("color", "red");                    }                    //获取模板行，复制一行                    var row = $("#tem").clone();                    //将新一行的按钮添加click事件                    row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);                    //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的                    //如果上面代码不行，你可以试一下                    //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);                    //亲测上面的代码在1.4.2.min...中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架                    row.find("#ID").text(obj[i].CKRID); //流水号                    row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号                    row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称                    //将新行添加到表格中                    row.appendTo("#data");                }            });        }        //获取传过来的参数并显示        function operation(event) {            alert(event.data.name);            alert(event.data.back);        }        //从服务器端获取数据，并显示到界面上,用ajax方法实现        function SetDataByAjax() {            $.ajax({                type: "get",    //设置调用类型                dataType: "json",   //设置数据类型                url: "getData.ashx",    //url                complete: function () { $("#loading").hide() },                success: function (obj) {                    $("tr").eq(0).nextAll().remove();   //将除模板行的tr删除                    //将获取到的数据动态的加载到table中                    for (var i = 0; i < obj.length; i++) {                        //将第四条的ID设置为红色（此处可以用来根据内容修改样式                        if (i == 3) {                            row.find("#ID").css("color", "red");                        }                        //获取模板行，复制一行                        var row = $("#tem").clone();                        //将新一行的按钮添加click事件                        row.find("#btn input").click({ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);                        //注意：在jquery1.4.2中，上面的方法会出错，具体原因我也不知道，反正1.7.1这样写是没有问题的                        //如果上面代码不行，你可以试一下                        //row.find("#btn input").bind("click",{ name: obj[i].CHRCARNUMBER, back: obj[i].CKRID }, operation);                        //亲测上面的代码在1.4.2中可以运行，这个问题的解决浪费了很长事件，都怪用了比较老的框架                        row.find("#ID").text(obj[i].CKRID); //流水号                        row.find("#CarNumber").text(obj[i].CHRCARNUMBER);   //汽车车牌号                        row.find("#BusinessName").text(obj[i].BCRNAME);     //所办理的业务名称                        //将新行添加到表格中                        row.appendTo("#data");                    }                }            });        }    </script>    </form></body></html>

上面的就是自己动手写了一个自动刷新页面的例子，上面例子中，除了用了JQuery这个里面的东西你不能控制，如果足够牛，你都不想用他这个框架，想自己写一个，那么也是可以的。只是对于我这个初学者来说，用这个还是能省好多事的。

一个getJson方法，只需要给3个参数，他就把创建对象、回调函数、设置参数等全部操作就都给你做了。这个还是值得学习的，在平时的学习中，对于常用到的东西，应该考虑将其提炼成一个方法，放到自己的小小代码库中。

虽然上面的代码不是很难，可是个人感觉这是我对于ajax理解的一个里程碑例子，一个例子，解开了我好多曾经的疑雾。