用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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
node.js爬虫框架node-crawler初体验
Oct 29 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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
帅气的琦玉老师
2020/03/02 日漫
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
2013/12/12 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
Jquery动态添加输入框的方法
2015/05/29 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
2018/09/06 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
简洁的十分钟Python入门教程
2015/04/03 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python猴子补丁知识点总结
2020/01/05 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
总经理岗位职责范本
2014/02/02 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
模范教师材料大全
2014/12/16 职场文书
Python基础知识之变量的详解
2021/04/14 Python
Golang 编译成DLL文件的操作
2021/05/06 Golang
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS