通过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实现自己的DOM选择器原理及代码
Mar 04 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
微信小程序 标签传入数据
May 08 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
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
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
jQuery表格行换色的三种实现方法
2011/06/27 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python魔法方法-自定义序列详解
2016/07/21 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
通过实例解析Python调用json模块
2019/12/11 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书