用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 相关文章推荐
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 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 session和cookie使用说明
2010/04/07 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jquery easyui使用心得
2014/07/07 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
vue鼠标悬停事件实例详解
2019/04/01 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
极简的HTML5模版
2015/07/09 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
艺术爱好者的自我评价分享
2013/10/08 职场文书
九年级科学教学反思
2014/01/29 职场文书
《春晓》教学反思
2014/04/20 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
大学生年度个人总结
2015/02/15 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python