用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小tip资料
Nov 23 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 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
聊天室php&amp;mysql(一)
2006/10/09 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
Javascript实现倒计时(防页面刷新)实例
2016/12/13 Javascript
vuejs指令详解
2017/02/07 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
员工拾金不昧表扬信
2014/01/09 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
运动会解说词200字
2014/02/06 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
灰雀教学反思
2014/04/28 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
小学生安全责任书
2014/07/25 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫