用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中的事件
Sep 23 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
JavaScript中的Function函数
Aug 27 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
正则表达式基础与常用验证表达式
Jun 16 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 文件上传系统手记
2009/10/26 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jquery 使用简明教程
2014/03/05 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信小程序云开发之使用云存储
2019/05/17 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python如何实现一个刷网页小程序
2018/11/27 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
运动会通讯稿100字
2014/01/31 职场文书
认购协议书范本
2014/04/22 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js