用jquery和json从后台获得数据集的代码


Posted in Javascript onNovember 07, 2011

其实Json也就是一种数据的格式,在后台将数据封转为一种格式,然后在前台用相同的方法解析,类似于序列化。json格式主要是由键值对组成,它可以表示多个数据。比如

{name:zhangsan,age:12,class:1}

同时json 还可以表示一个数据集,它是又{}和: 来组成的。比如我们需要从数据库查询出一张表格,然后将表格传输给前台,但是dataset是不能直接传输的,我们需要将dataset数据转换为json数据,这样可以方便前台js解析数据,下面我来写一下转换的格式

{Name:表的名称,Rows:[{SName:姓名,SAge:年龄}{...}{...}]}这是一张表格的数据格式,

{Tables:[{Name:表1的名称,Rows:[{SName:姓名,SAge:年龄}{...}{...}]}{Name:表2的名称,Rows:[{SName:姓名,SAge:年龄}{...}{...}]}]}这是多张表的数据格式

下面用一个例子来给大家演示一下数据集得传输

首先我们需要一个前台页面来获取数据 studentinfo.html,在这个页面中我们有一个函数来获取Json格式的数据,jquery 很好的为我们封装了一个这样的函数,JSON.parse();

<script type="text/javascript"> 
function getData() { 
$("#data").val(""); 
jQuery.post('../ashx_for_request/getdataset.ashx', {}, function (data) {//data为后台传输过来的数据 
var obj = JSON.parse(data); //将后天传输的数据转换为Json格式 
$("#data").html(""); 
$.each(obj.Tables, function (index, table) {//遍历数据集表格,输出数据集的内容 
//根据不同的表名,显示不同的字段。得到特定表,table = obj.Tables[0] 
var tableName = table.Name; 
$.each(table.Rows, function (index, row) {//遍历数据集表格中的行 
$("#data").html($("#data").html() + row.SID + row.SName + row.SAge + row.SClass + row.SSex + row.SGrade + "</br>"); //每行的每一个列的内容 在这里我们用row.colname来获取每一行每一列的内容 
}); 
}); 
}) 
} 
</script>

我们用到的是jquery 的post函数来从后台获取数据,然后将数据解析,现在我来演示一下后台的数据格式
private String GetDataSet() 
{ 
System.Data.DataSet ds = new System.Data.DataSet(); 
//测试用数据 
using (System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection("server=.;database=Student;uid=sa;pwd=123456")) 
{ 
using (System.Data.SqlClient.SqlCommand com=conn.CreateCommand()) 
{ 
com.CommandText = "select * from BaseNews"; 
System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(com); 
da.Fill(ds); 
} 
} 
return Dataset2Json(ds); } 
///<summary> 
/// dataTable转换成Json格式 
///</summary> 
///<param name="dt"></param> 
///<returns></returns> 
public static string DataTable2Json(System.Data.DataTable dt) 
{ 
StringBuilder jsonBuilder = new StringBuilder(); 
jsonBuilder.Append("{\"Name\":\"" + dt.TableName + "\",\"Rows"); 
jsonBuilder.Append("\":["); 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
jsonBuilder.Append("{"); 
for (int j = 0; j < dt.Columns.Count; j++) 
{ 
jsonBuilder.Append("\""); 
jsonBuilder.Append(dt.Columns[j].ColumnName); 
jsonBuilder.Append("\":\""); 
jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"")); //对于特殊字符,还应该进行特别的处理。 
jsonBuilder.Append("\","); 
} 
jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
jsonBuilder.Append("},"); 
} 
jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
jsonBuilder.Append("]"); 
jsonBuilder.Append("}"); 
return jsonBuilder.ToString(); 
} 
///<summary> 
/// DataSet转换成Json格式 
///</summary> 
///<param name="ds">DataSet</param> 
///<returns></returns> 
public static string Dataset2Json(System.Data.DataSet ds) 
{ 
StringBuilder json = new StringBuilder(); 
json.Append("{\"Tables\":"); 
json.Append("["); 
foreach (System.Data.DataTable dt in ds.Tables) 
{ 
json.Append(DataTable2Json(dt)); 
json.Append(","); 
} 
json.Remove(json.Length - 1, 1); 
json.Append("]"); 
json.Append("}"); 
return json.ToString(); 
}

给大家看一下结果

用jquery和json从后台获得数据集的代码

大家可以根据得到的数据给出相应的格式

大家不要以为到这里就完成了哦,Json格式在不同的浏览器下会有兼容性问题,这时大家只需下载一个json2的js即可。

Javascript 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
js实现文字选中分享功能
Jan 25 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
JS重要知识点小结
Nov 06 #Javascript
javascript日期转换 时间戳转日期格式
Nov 05 #Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 #Javascript
再说AutoComplete自动补全之实现原理
Nov 05 #Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 #Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 #Javascript
由Javascript实现的页面日历
Nov 04 #Javascript
You might like
php判断正常访问和外部访问的示例
2014/02/10 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
周年庆典主持词
2014/04/02 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
Python中字符串对象语法分享
2022/02/24 Python
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers