用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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
Javascript复制实例详解
Jan 28 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
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利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Vue框架之goods组件开发详解
2018/01/25 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
layui实现三级联动效果
2019/07/26 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
jQuery实现动态向上滚动
2020/12/21 jQuery
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python基于select实现的socket服务器
2016/04/13 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python实现计算器简易版
2020/12/17 Python
美国钻石商店:Zales
2016/11/20 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
迟到检讨书5000字
2014/01/31 职场文书
品牌宣传方案
2014/03/21 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
详细介绍python类及类的用法
2021/05/31 Python
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis