通过Jquery的Ajax方法读取将table转换为Json
2023-06-13 09:15:27 时间
1.创建Users表
复制代码代码如下:
createtableUsers
(
UserIdintidentity(1,1)primarykey,
UserNamevarchar(20)
)
insertintoUsersvalues("Bradley")
insertintoUsersvalues("Dan")
createtableUsers
(
UserIdintidentity(1,1)primarykey,
UserNamevarchar(20)
)
insertintoUsersvalues("Bradley")
insertintoUsersvalues("Dan")
2.创建JsonHelper类
publicclassJsonHelper
{
#region序列化和反序列化
//序列化
publicstaticstringJsonSerializer<T>(Tt)
{
//使用DataContractJsonSerializer将T对象序列化为内存流。
DataContractJsonSerializerjsonSerializer=newDataContractJsonSerializer(typeof(T));
MemoryStreamms=newMemoryStream();
//使用WriteObject方法将JSON数据写入到流中。
jsonSerializer.WriteObject(ms,t);
//流转字符串
stringjsonString=Encoding.UTF8.GetString(ms.ToArray());
ms.Close();
//替换Json的Date字符串
stringp=@"\\/Date\((\d+)\+\d+\)\\/";
MatchEvaluatormatchEvaluator=newMatchEvaluator(ConvertJsonDateToDateString);
Regexreg=newRegex(p);
jsonString=reg.Replace(jsonString,matchEvaluator);
returnjsonString;
}
publicstaticTJsonDeserialize<T>(stringjsonString)
{
//将"yyyy-MM-ddHH:mm:ss"格式的字符串转为"\/Date(1294499956278+0800)\/"格式
stringp=@"\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}";
MatchEvaluatormatchEvaluator=newMatchEvaluator(ConvertDateStringToJsonDate);
Regexreg=newRegex(p);
jsonString=reg.Replace(jsonString,matchEvaluator);
DataContractJsonSerializerjsonSerializer=newDataContractJsonSerializer(typeof(T));
//字符串转流
MemoryStreamms=newMemoryStream(Encoding.UTF8.GetBytes(jsonString));
//通过使用DataContractJsonSerializer的ReadObject方法，将JSON编码数据反序列化为T
Tobj=(T)jsonSerializer.ReadObject(ms);
returnobj;
}
publicstaticstringConvertJsonDateToDateString(Matchmatch)
{
stringresult=string.Empty;
DateTimedateTime=newDateTime(1970,1,1);
dateTime=dateTime.AddMilliseconds(long.Parse(match.Groups[1].Value));
dateTime=dateTime.ToLocalTime();
result=dateTime.ToString("yyyy-MM-ddHH:mm:ss");
returnresult;
}
privatestaticstringConvertDateStringToJsonDate(Matchm)
{
stringresult=string.Empty;
DateTimedt=DateTime.Parse(m.Groups[0].Value);
dt=dt.ToUniversalTime();
TimeSpants=dt-DateTime.Parse("1970-01-01");
result=string.Format("\\/Date({0}+0800)\\/",ts.TotalMilliseconds);
returnresult;
}
#endregion
//对象转换为Json
publicstaticstringObjectToJson(objectobj)
{
JavaScriptSerializerjs=newJavaScriptSerializer();
try
{
returnjs.Serialize(obj);
}
catch(Exceptionexception)
{
thrownewException(exception.Message);
}
}
//数据表转化为集合
publicstaticList<Dictionary<string,object>>DataTableToList(DataTabledt)
{
List<Dictionary<string,object>>list=newList<Dictionary<string,object>>();
foreach(DataRowdataRowindt.Rows)
{
Dictionary<string,object>dic=newDictionary<string,object>();
foreach(DataColumndcindt.Columns)
{
dic.Add(dc.ColumnName,dataRow[dc.ColumnName]);
}
list.Add(dic);
}
returnlist;
}
//表转换为Json
publicstaticstringDataTableToJson(DataTabledt)
{
returnObjectToJson(DataTableToList(dt));
}
}
publicclassJsonHelper
{
#region序列化和反序列化
//序列化
publicstaticstringJsonSerializer<T>(Tt)
{
//使用DataContractJsonSerializer将T对象序列化为内存流。
DataContractJsonSerializerjsonSerializer=newDataContractJsonSerializer(typeof(T));
MemoryStreamms=newMemoryStream();
//使用WriteObject方法将JSON数据写入到流中。
jsonSerializer.WriteObject(ms,t);
//流转字符串
stringjsonString=Encoding.UTF8.GetString(ms.ToArray());
ms.Close();
//替换Json的Date字符串
stringp=@"\\/Date\((\d+)\+\d+\)\\/";
MatchEvaluatormatchEvaluator=newMatchEvaluator(ConvertJsonDateToDateString);
Regexreg=newRegex(p);
jsonString=reg.Replace(jsonString,matchEvaluator);
returnjsonString;
}
publicstaticTJsonDeserialize<T>(stringjsonString)
{
//将"yyyy-MM-ddHH:mm:ss"格式的字符串转为"\/Date(1294499956278+0800)\/"格式
stringp=@"\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}";
MatchEvaluatormatchEvaluator=newMatchEvaluator(ConvertDateStringToJsonDate);
Regexreg=newRegex(p);
jsonString=reg.Replace(jsonString,matchEvaluator);
DataContractJsonSerializerjsonSerializer=newDataContractJsonSerializer(typeof(T));
//字符串转流
MemoryStreamms=newMemoryStream(Encoding.UTF8.GetBytes(jsonString));
//通过使用DataContractJsonSerializer的ReadObject方法，将JSON编码数据反序列化为T
Tobj=(T)jsonSerializer.ReadObject(ms);
returnobj;
}
publicstaticstringConvertJsonDateToDateString(Matchmatch)
{
stringresult=string.Empty;
DateTimedateTime=newDateTime(1970,1,1);
dateTime=dateTime.AddMilliseconds(long.Parse(match.Groups[1].Value));
dateTime=dateTime.ToLocalTime();
result=dateTime.ToString("yyyy-MM-ddHH:mm:ss");
returnresult;
}
privatestaticstringConvertDateStringToJsonDate(Matchm)
{
stringresult=string.Empty;
DateTimedt=DateTime.Parse(m.Groups[0].Value);
dt=dt.ToUniversalTime();
TimeSpants=dt-DateTime.Parse("1970-01-01");
result=string.Format("\\/Date({0}+0800)\\/",ts.TotalMilliseconds);
returnresult;
}
#endregion
//对象转换为Json
publicstaticstringObjectToJson(objectobj)
{
JavaScriptSerializerjs=newJavaScriptSerializer();
try
{
returnjs.Serialize(obj);
}
catch(Exceptionexception)
{
thrownewException(exception.Message);
}
}
//数据表转化为集合
publicstaticList<Dictionary<string,object>>DataTableToList(DataTabledt)
{
List<Dictionary<string,object>>list=newList<Dictionary<string,object>>();
foreach(DataRowdataRowindt.Rows)
{
Dictionary<string,object>dic=newDictionary<string,object>();
foreach(DataColumndcindt.Columns)
{
dic.Add(dc.ColumnName,dataRow[dc.ColumnName]);
}
list.Add(dic);
}
returnlist;
}
//表转换为Json
publicstaticstringDataTableToJson(DataTabledt)
{
returnObjectToJson(DataTableToList(dt));
}
}
3.添加ashx代码文件
publicclassGetData:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
if(context.Request["action"]=="display")
{
context.Response.Write(JsonHelper.DataTableToJson(GetAllUsers()));
}
}
staticSqlConnectionconn=newSqlConnection("server=.;database=Test;uid=sa;pwd=123456");
publicstaticDataTableGetAllUsers()
{
stringsql="select*fromusers";
SqlDataAdapteradapter=newSqlDataAdapter(sql,conn);
DataTabledt=newDataTable();
adapter.Fill(dt);
returndt;
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
publicclassGetData:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
if(context.Request["action"]=="display")
{
context.Response.Write(JsonHelper.DataTableToJson(GetAllUsers()));
}
}
staticSqlConnectionconn=newSqlConnection("server=.;database=Test;uid=sa;pwd=123456");
publicstaticDataTableGetAllUsers()
{
stringsql="select*fromusers";
SqlDataAdapteradapter=newSqlDataAdapter(sql,conn);
DataTabledt=newDataTable();
adapter.Fill(dt);
returndt;
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
4.前端调用
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="js/jquery-1.6.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varoptions={
type:"post",
url:"/GetData.ashx",
dataType:"json",
data:{action:"display"},
success:function(data){
varhtml="<tableborder="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>
<formid="form1"runat="server">
<divid="divData">
</div>
</form>
</body>
</html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="js/jquery-1.6.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
varoptions={
type:"post",
url:"/GetData.ashx",
dataType:"json",
data:{action:"display"},
success:function(data){
varhtml="<tableborder="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>
<formid="form1"runat="server">
<divid="divData">
</div>
</form>
</body>
</html>
5.效果图
6.同样可以通过getJSON方法读取数据
$.getJSON("/GetData.ashx",{action:"display"},function(data){
varhtml="<tableborder="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){
varhtml="<tableborder="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);
})
相关文章
- Js/JQuery将金额数字转换为中文万、亿结尾
- jQuery表单插件jquery.form.js详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jquery表单下所有元素的隐藏
- Jquery实战_读书笔记1—选择jQuery
- JQuery获取和设置Select选项的代码
- JQuery插件模板制作jquery插件的朋友可以参考下
- Jquery截取中文字符串的实现代码
- JavaScript对象之间的转换jQuery对象和原声DOM
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- JQUERY实现左侧TIPS滑进滑出效果示例
- 使用jQuery解决IE与FireFox下createElement方法的差异
- JS对象转换为Jquery对象实现代码
- jQuery中操控hidden、disable等无值属性的方法
- jquery教程ajax请求json数据示例
- JS对象转换为Jquery对象示例