用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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
JS原生实现轮播图的几种方法
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内核(二)之SAPI探究
2015/11/10 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
jQuery的三种$()
2009/12/30 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python Django批量导入数据
2016/03/25 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
python实现大转盘抽奖效果
2019/01/22 Python
django中使用POST方法获取POST数据
2019/08/20 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
Europcar比利时:租车
2019/08/26 全球购物
超市开店计划书
2014/04/26 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL