Json数据异步绑定到界面的Table并且自动刷新原理及代码
做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理解的一个里程碑例子，一个例子，解开了我好多曾经的疑雾。
相关推荐
-
JS扩展Z-Blog图片验证码的单击自动刷新与评论内容自动保存
在script/common.js最后加入下面的话可以实现图片验证码的自动刷新与评论内容自动保存(ForIE) 由于Z-Blog的JS扩展机制不够好,在不重建的情况下扩展东西只能用window.onload(IE). 既然用了window.onload,那就干脆用window.clipboardData了. 大家是不是期盼这两个功能很久了?没有了Ajax的,这两个功能就太重要太重要太重要了. 实际这个函数因为先天缺陷并不完美,下一版,构想在每一页下面加上一句话读一次LoadExtraScript
-
javascript时间自动刷新实现原理与步骤
项目结构: 运行效果: ========================================================= 代码部分: ========================================================= /Clock/WebContent/index.jsp 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8&q
-
js实现网页自动刷新可制作节日倒计时效果
复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta
-
框架页面高度自动刷新的Javascript脚本
实现原理:加载index.htm时候,每隔1秒钟自动调用脚本刷新框架页面代码 代码优点:只需要设置index.html框架页面中的脚本,调用加载的子页面中不需要设置任何代码. index.htm代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo
-
返回上一页并自动刷新的JavaScript代码
用JavaScript一般的使用history.go(-1)和history.back()等 但返回的是页面还是缓存中的数据,更新的数据不能马上呈现出来 这里只要使用一句简单的一条javascript语句就能实行,返回上一页并刷新页面 复制代码 代码如下: location.href = document.referrer;//重新载入上一页
-
自动刷新网页,自动刷新当前页面,JS调用
reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面,
-
javascript 页面只自动刷新一次
1.看看下面这段代码 复制代码 代码如下: <Script> function reurl(){ url = location.href; //把当前页面的地址赋给变量 url var times = url.split("?"); //分切变量 url 分隔符号为 "?" if(times[1] != 1){ //如果?后的值不等于1表示没有刷新 url += "?1"; //把变量 url 的值加入 ?1 self.locatio
-
javascript观察者模式实现自动刷新效果
本文实例为大家分享了js观察者模式实现自动刷新的具体代码,供大家参考,具体内容如下 // author wangbinandi@gmail.com const observable = obj => { const observers = Symbol(); const set = function(target, key, value) { const result = Reflect.set(target, key, value); //console.log("set key:&qu
-
Json数据异步绑定到界面的Table并且自动刷新原理及代码
做Winform习惯了,大家都习惯设置datasource这样的写法. 如果想实现页面定时刷新的话,用.net给封装好的updatepanel和timer两个控件实现起来其实挺容易的.这样做加入了很多你不能控制的元素,举个例子说就是:用updatepanel后,你设置的样式很有可能就变了,然后你还需要去调这些.所以还是用一些自己控制性高的代码比较合适. 今天就先从这个updatepanel加timer实现页面自动刷新这个例子来下手吧. 首先来看一下我的一般处理程序,在这个里面,我自己实现的是从数
-
jquery调取json数据实现省市级联的方法
本文实例讲述了jquery调取json数据实现省市级联的方法.分享给大家供大家参考.具体如下: 使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方): Html代码: jQuery mobile中,有input list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,in
-
Android随手笔记44之JSON数据解析
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种理想的数据交换格式. 本文将主要介绍在Android开发中,如何在服务器端创建JSON数据,以及如何在Android客户端对JSON数据进行解析. 1.JSON数据结构 在JSON中有两种数据结构:对象和数组. 1.1对象 在JSON中,一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"
-
jQuery Ajax异步处理Json数据详解
先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: 复制代码 代码如下: $("button").click(function(){ $.getJSON("demo_ajax_json.js",function(result){ $.each(result, function(i, field){ $("div").append(field + " "); }); });
-
Ajax异步请求JSon数据(图文详解)
上一篇讲了Ajax请求数据text类型,text和html都是处理比较简答的数据,而在编程过程中使用Ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,今天就说说,JSON数据请求过程中的一些细节: 我们友情提醒本文所需工具和原料如下: wamp或lamp环境.jquery.js.编辑器 具体方法/步骤请看下面: 1.创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js,如图
-
jquery的ajax异步请求接收返回json数据实例
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: 复制代码 代码如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "json
-
jquery使用EasyUI Tree异步加载JSON数据（生成树）
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考虑采用异步加载. 但是因为后台默认传来的数据是 一个实体,所以又在后台进行了JSON字符串拼接. 最后,在网上找了N多代码,然后又去问了好几个群里的网友,终于搞出来这个小东西. 一.HTML部分代码 <div id="categoryChooseDiv" title="请选
-
jQuery实现异步获取json数据的2种方式
本文实例讲述了jQuery实现异步获取json数据的2种方式,在web程序开发中非常具有实用价值.分享给大家供大家参考之用.具体方法如下: 通常来说,jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本文就来实现使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: { "one" : "Hello", "two" : "World" } 一
-
jQuery异步获取json数据方法汇总
jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: 复制代码 代码如下: { "one" : "Hello", "two" : "World" } ■ 通过$.getJSON方法获取json数据 复制代码 代码如下: <script src="Scr
-
C#异步绑定数据实现方法
本文实例讲述了C#异步绑定数据实现方法.分享给大家供大家参考.具体如下: using System; using System.Collections.Generic; using System.Text; using System.Data.SqlClient; using System.Data; using System.Windows.Forms; namespace WindowsApplication2 { public class AsyncCallBackOpeartion {