用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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
js实现自定义进度条效果
Mar 15 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php 中英文语言转换类代码
2011/08/11 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
document.documentElement和document.body区别介绍
2013/09/16 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
django settings.py 配置文件及介绍
2019/07/15 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
通过实例解析python and和or使用方法
2020/11/14 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
shallow copy和deep copy的区别
2016/05/09 面试题
森林防火工作方案
2014/02/14 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2014年卫生工作总结
2014/11/27 职场文书
业务员岗位职责范本
2015/04/03 职场文书
用Python实现屏幕截图详解
2022/01/22 Python
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL