用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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
js 居中漂浮广告
Mar 21 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
小程序实现五星点评效果
Nov 03 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 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
Zerg兵种介绍
2020/03/14 星际争霸
web方式ftp
2006/10/09 PHP
PHP类的封装与继承详解
2015/09/29 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
如何利用Python模拟GitHub登录详解
2019/07/15 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
安全生产实施方案
2014/02/23 职场文书
置业顾问岗位职责
2014/03/02 职场文书
大学新生军训方案
2014/05/03 职场文书
收银员岗位职责
2015/02/03 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016年情人节广告语
2016/01/28 职场文书
入党转正申请书范文
2019/05/20 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
Python软件包安装的三种常见方法
2022/07/07 Python