通过Jquery的Ajax方法读取将table转换为Json


Posted in Javascript onMay 31, 2014

1. 创建Users表

create table Users 
( 
UserId int identity(1,1) primary key, 
UserName varchar(20) 
) insert into Users values('Bradley') 
insert into Users values('Dan')

create table Users 
( 
UserId int identity(1,1) primary key, 
UserName varchar(20) 
) insert into Users values('Bradley') 
insert into Users values('Dan')

2. 创建JsonHelper类
public class JsonHelper 
{ 
#region 序列化和反序列化 
// 序列化 
public static string JsonSerializer<T>(T t) 
{ 
// 使用 DataContractJsonSerializer 将 T 对象序列化为内存流。 
DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(typeof (T)); 
MemoryStream ms = new MemoryStream(); 
// 使用 WriteObject 方法将 JSON 数据写入到流中。 
jsonSerializer.WriteObject(ms, t); 
// 流转字符串 
string jsonString = Encoding.UTF8.GetString(ms.ToArray()); 
ms.Close(); 
//替换Json的Date字符串 
string p = @"\\/Date\((\d+)\+\d+\)\\/"; 
MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString); 
Regex reg = new Regex(p); 
jsonString = reg.Replace(jsonString, matchEvaluator); 
return jsonString; 
} 
public static T JsonDeserialize<T>(string jsonString) 
{ 
//将"yyyy-MM-dd HH:mm:ss"格式的字符串转为"\/Date(1294499956278+0800)\/"格式 
string p = @"\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}"; 
MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertDateStringToJsonDate); 
Regex reg = new Regex(p); 
jsonString = reg.Replace(jsonString, matchEvaluator); 
DataContractJsonSerializer jsonSerializer=new DataContractJsonSerializer(typeof(T)); 
// 字符串转流 
MemoryStream ms=new MemoryStream(Encoding.UTF8.GetBytes(jsonString)); 
// 通过使用 DataContractJsonSerializer 的 ReadObject 方法,将 JSON 编码数据反序列化为T 
T obj = (T) jsonSerializer.ReadObject(ms); 
return obj; 
} 
public static string ConvertJsonDateToDateString(Match match) 
{ 
string result = string.Empty; 
DateTime dateTime=new DateTime(1970,1,1); 
dateTime = dateTime.AddMilliseconds(long.Parse(match.Groups[1].Value)); 
dateTime = dateTime.ToLocalTime(); 
result = dateTime.ToString("yyyy-MM-dd HH:mm:ss"); 
return result; 
} 
private static string ConvertDateStringToJsonDate(Match m) 
{ 
string result = string.Empty; 
DateTime dt = DateTime.Parse(m.Groups[0].Value); 
dt = dt.ToUniversalTime(); 
TimeSpan ts = dt - DateTime.Parse("1970-01-01"); 
result = string.Format("\\/Date({0}+0800)\\/",ts.TotalMilliseconds); 
return result; 
} 
#endregion // 对象转换为Json 
public static string ObjectToJson(object obj) 
{ 
JavaScriptSerializer js=new JavaScriptSerializer(); 
try 
{ 
return js.Serialize(obj); 
} 
catch (Exception exception) 
{ 
throw new Exception(exception.Message); 
} 
} 
// 数据表转化为集合 
public static List<Dictionary<string,object>> DataTableToList(DataTable dt) 
{ 
List<Dictionary<string ,object>> list=new List<Dictionary<string, object>>(); 
foreach (DataRow dataRow in dt.Rows) 
{ 
Dictionary<string,object> dic=new Dictionary<string, object>(); 
foreach (DataColumn dc in dt.Columns) 
{ 
dic.Add(dc.ColumnName,dataRow[dc.ColumnName]); 
} 
list.Add(dic); 
} 
return list; 
} 
// 表转换为Json 
public static string DataTableToJson(DataTable dt) 
{ 
return ObjectToJson(DataTableToList(dt)); 
} 
}

public class JsonHelper 
{ 
#region 序列化和反序列化 
// 序列化 
public static string JsonSerializer<T>(T t) 
{ 
// 使用 DataContractJsonSerializer 将 T 对象序列化为内存流。 
DataContractJsonSerializer jsonSerializer = new DataContractJsonSerializer(typeof (T)); 
MemoryStream ms = new MemoryStream(); 
// 使用 WriteObject 方法将 JSON 数据写入到流中。 
jsonSerializer.WriteObject(ms, t); 
// 流转字符串 
string jsonString = Encoding.UTF8.GetString(ms.ToArray()); 
ms.Close(); 
//替换Json的Date字符串 
string p = @"\\/Date\((\d+)\+\d+\)\\/"; 
MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertJsonDateToDateString); 
Regex reg = new Regex(p); 
jsonString = reg.Replace(jsonString, matchEvaluator); 
return jsonString; 
} 
public static T JsonDeserialize<T>(string jsonString) 
{ 
//将"yyyy-MM-dd HH:mm:ss"格式的字符串转为"\/Date(1294499956278+0800)\/"格式 
string p = @"\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}"; 
MatchEvaluator matchEvaluator = new MatchEvaluator(ConvertDateStringToJsonDate); 
Regex reg = new Regex(p); 
jsonString = reg.Replace(jsonString, matchEvaluator); 
DataContractJsonSerializer jsonSerializer=new DataContractJsonSerializer(typeof(T)); 
// 字符串转流 
MemoryStream ms=new MemoryStream(Encoding.UTF8.GetBytes(jsonString)); 
// 通过使用 DataContractJsonSerializer 的 ReadObject 方法,将 JSON 编码数据反序列化为T 
T obj = (T) jsonSerializer.ReadObject(ms); 
return obj; 
} 
public static string ConvertJsonDateToDateString(Match match) 
{ 
string result = string.Empty; 
DateTime dateTime=new DateTime(1970,1,1); 
dateTime = dateTime.AddMilliseconds(long.Parse(match.Groups[1].Value)); 
dateTime = dateTime.ToLocalTime(); 
result = dateTime.ToString("yyyy-MM-dd HH:mm:ss"); 
return result; 
} 
private static string ConvertDateStringToJsonDate(Match m) 
{ 
string result = string.Empty; 
DateTime dt = DateTime.Parse(m.Groups[0].Value); 
dt = dt.ToUniversalTime(); 
TimeSpan ts = dt - DateTime.Parse("1970-01-01"); 
result = string.Format("\\/Date({0}+0800)\\/",ts.TotalMilliseconds); 
return result; 
} 
#endregion // 对象转换为Json 
public static string ObjectToJson(object obj) 
{ 
JavaScriptSerializer js=new JavaScriptSerializer(); 
try 
{ 
return js.Serialize(obj); 
} 
catch (Exception exception) 
{ 
throw new Exception(exception.Message); 
} 
} 
// 数据表转化为集合 
public static List<Dictionary<string,object>> DataTableToList(DataTable dt) 
{ 
List<Dictionary<string ,object>> list=new List<Dictionary<string, object>>(); 
foreach (DataRow dataRow in dt.Rows) 
{ 
Dictionary<string,object> dic=new Dictionary<string, object>(); 
foreach (DataColumn dc in dt.Columns) 
{ 
dic.Add(dc.ColumnName,dataRow[dc.ColumnName]); 
} 
list.Add(dic); 
} 
return list; 
} 
// 表转换为Json 
public static string DataTableToJson(DataTable dt) 
{ 
return ObjectToJson(DataTableToList(dt)); 
} 
}

3. 添加ashx代码文件
public class GetData : IHttpHandler 
{ public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
if (context.Request["action"]=="display") 
{ 
context.Response.Write(JsonHelper.DataTableToJson(GetAllUsers())); 
} 
} 
static SqlConnection conn = new SqlConnection("server=.;database=Test;uid=sa;pwd=123456"); 
public static DataTable GetAllUsers() 
{ 
string sql = "select * from users"; 
SqlDataAdapter adapter = new SqlDataAdapter(sql, conn); 
DataTable dt = new DataTable(); 
adapter.Fill(dt); 
return dt; 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

public class GetData : IHttpHandler 
{ public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
if (context.Request["action"]=="display") 
{ 
context.Response.Write(JsonHelper.DataTableToJson(GetAllUsers())); 
} 
} 
static SqlConnection conn = new SqlConnection("server=.;database=Test;uid=sa;pwd=123456"); 
public static DataTable GetAllUsers() 
{ 
string sql = "select * from users"; 
SqlDataAdapter adapter = new SqlDataAdapter(sql, conn); 
DataTable dt = new DataTable(); 
adapter.Fill(dt); 
return dt; 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
}

4. 前端调用
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
<script src="js/jquery-1.6.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
var options = { 
type: 'post', 
url: "/GetData.ashx", 
dataType: "json", 
data: { action: "display" }, 
success: function(data) { 
var html = "<table border='2px' style='text-align:center;border-style:solid;border-width:2px;border-color:#00ff00;'><tr><td>UserId</td><td>UserName</td></tr>"; 
$.each(data, function(i, result) { 
html += "<tr><td>" + result["UserId"] + "</td><td>" + result["UserName"] + "</td></tr>"; 
}) 
html += "</table>"; 
$("#divData").html(html); 
} 
}; 
$.ajax(options); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divData"> </div> 
</form> 
</body> 
</html>

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
<script src="js/jquery-1.6.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
var options = { 
type: 'post', 
url: "/GetData.ashx", 
dataType: "json", 
data: { action: "display" }, 
success: function(data) { 
var html = "<table border='2px' style='text-align:center;border-style:solid;border-width:2px;border-color:#00ff00;'><tr><td>UserId</td><td>UserName</td></tr>"; 
$.each(data, function(i, result) { 
html += "<tr><td>" + result["UserId"] + "</td><td>" + result["UserName"] + "</td></tr>"; 
}) 
html += "</table>"; 
$("#divData").html(html); 
} 
}; 
$.ajax(options); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div id="divData"> </div> 
</form> 
</body> 
</html>

5. 效果图
通过Jquery的Ajax方法读取将table转换为Json 
6. 同样可以通过getJSON方法读取数据
$.getJSON("/GetData.ashx",{ action: "display" },function(data) { 
var html = "<table border='2px' style='text-align:center;border-style:solid;border-width:2px;border-color:#00ff00;'><tr><td>UserId</td><td>UserName</td></tr>"; 
$.each(data, function(i, result) { 
html += "<tr><td>" + result["UserId"] + "</td><td>" + result["UserName"] + "</td></tr>"; 
}) 
html += "</table>"; 
$("#divData").html(html); 
})

$.getJSON("/GetData.ashx",{ action: "display" },function(data) { 
var html = "<table border='2px' style='text-align:center;border-style:solid;border-width:2px;border-color:#00ff00;'><tr><td>UserId</td><td>UserName</td></tr>"; 
$.each(data, function(i, result) { 
html += "<tr><td>" + result["UserId"] + "</td><td>" + result["UserName"] + "</td></tr>"; 
}) 
html += "</table>"; 
$("#divData").html(html); 
})
Javascript 相关文章推荐
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
JS异步函数队列功能实例分析
Nov 28 Javascript
three.js 入门案例详解
Jan 23 Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
jQuery移除元素自动解绑事件实现思路及代码
May 31 #Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 #Javascript
js中的for如何实现foreach中的遍历
May 31 #Javascript
javascript 小数取整简单实现方式
May 30 #Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 #Javascript
jquery获取tagName再进行判断
May 29 #Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
May 29 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
js表单序列化判断空值的实例
2017/09/22 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python双向链表实现实例代码
2013/11/21 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python断言assert的用法代码解析
2018/02/03 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
给领导的致歉信范文
2014/01/13 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
交通处罚决定书
2015/06/24 职场文书
诉讼和解协议书
2016/03/23 职场文书