用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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
Validform表单验证总结篇
Oct 31 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
JS动画定时器知识总结
Mar 23 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
js实现翻牌小游戏
Jul 31 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+DBM的同学录程序(1)
2006/10/09 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
php实现简单加入购物车功能
2017/03/07 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python计算列表内各元素的个数实例
2018/06/29 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python-opencv 双线性插值实例
2020/01/17 Python
python属于哪种语言
2020/08/16 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
监理员的岗位职责
2013/11/13 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
项目投资合作意向书
2014/07/29 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
初中物理教学反思
2016/02/19 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
方法汇总:Python 安装第三方库常用
2022/04/26 Python
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL