首页 > 编程 > JavaScript > 正文

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

2019-11-20 15:00:09

字体：大中小

来源：转载

供稿：网友

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. 效果图

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); 
}) 

上一篇：基于iframe实现类似于ajax的页面无刷新

下一篇：jQuery移除元素自动解绑事件实现思路及代码

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

荣耀总裁赵明乌镇演讲：荣耀首款5G手机V30下月发布

2019-10-23 09:17:05

搜狐张朝阳：回归媒体是搜狐重新崛起的关键

2019-10-21 09:20:02

华为轮值董事长郭平：虚拟技术创造现实价值

2019-10-21 09:00:12

滴滴英文服务上线两周年用户已超200万

2019-09-26 08:57:12

华为推出全球至快AI训练集群Atlas900

2019-09-25 08:46:36

马斯克：特斯拉正组建中国技术团队

2019-09-25 08:15:43

疑难解答

图片精选

网友关注