通过Jquery的Ajax方法读取将table转换为Json
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')
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));
}
}
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;
}
}
}
<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);
})
相关推荐
-
基于JQuery的动态删除Table表格的行和列的代码
首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码 代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引 第二个
-
使用jquery给指定的table动态添加一行、删除一行
需求场景 1).添加一行 支持在任意行添加一行且可配置的,如可在第一行添加一行.第二行添加一行.倒数第一行添加一行.倒数第二行添加一行,随需求的变化都不会影响. 前提条件:行数需在表中存在否则添加不成功. 2).删除一行 支持动态删除一行. 先演示结果,如中意了在好好研究代码. 1.原始界面如下: 2.添加一行,如要添加一行需点击"添加"按钮,现点击两下会自动添加两行,效果如下截图: 3.删除一行,如要删除指定行,先要选中行然后在点击"删除"按钮进行删除(这不是废话
-
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test
-
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
html代码(test.html),js在html底部 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test-jquery-ajax-list</title> </head> <body> <div class="main">
-
jQuery ajax动态生成table功能示例
本文实例讲述了jQuery ajax动态生成table的方法.分享给大家供大家参考,具体如下: $(function(){ ajaxT(); }); function ajaxT(){ $.ajax({ type:"POST", dataType: "json", url:"<%=basePath%>UserInfoServlet", data:"doaction=userList", success:functi
-
jQuery实现动态添加tr到table的方法
本文实例讲述了jQuery实现动态添加tr到table的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co
-
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
服务器再把GridView反构造成DataTable, 再给DataTable增加一行之后,绑定到GridView,然后发回客户端... 能不能简单一点呢? 在使用Ajax数据请求数据,通常都是简单格式,比如String,信息量较少.当然也可以请求回XML,但是XML数据冗余多,取到客户端处理比json麻烦的多. 能不能简单一点呢? 上面这些问题,如果DataTable与JSON类型可以方便的相互转换,都可以迎刃而解了. 优点:1)避免不必要的回传: 2)精简异步请求数据的大小 : 3)解决数据
-
JQuery Ajax动态生成Table表格
前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
-
JQuery动态给table添加、删除行 改进版
复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row
-
JQuery DataTable删除行后的页面更新利用Ajax解决
使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意: 复制代码 代码如下: var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', 'bProcessing': true, 'bStateSa
-
jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不