通过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 面向对象全新理练之继承与多态
Dec 03 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
Node 模块原理与用法详解
May 13 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
对javascript和select部件的结合运用
2006/10/09 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
javascript引用对象的方法
2007/01/11 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python3.5仿微软计算器程序
2020/03/30 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
python requests证书问题解决
2019/09/05 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Python中求对数方法总结
2020/03/10 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
挂靠协议书范本
2014/04/22 职场文书
2016新年问候语大全
2015/11/11 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android