通过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 相关文章推荐
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
javascript 触发事件列表 比较不错
2009/09/03 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
Python数组遍历的简单实现方法小结
2016/04/27 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
施工安全责任书
2014/04/14 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
个人年终总结范文
2015/03/09 职场文书
简爱电影观后感
2015/06/10 职场文书
2015年中秋寄语
2015/07/31 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL