用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 装载iframe子页面,自适应高度
Mar 20 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue中如何让子组件修改父组件数据
Jun 14 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获取网页请求状态程序示例
2014/06/17 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
鼠标图片振动代码
2006/07/06 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python版百度语音识别功能
2019/07/09 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
Python多线程的退出控制实现
2020/08/10 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
MySQL面试题目集锦
2016/04/14 面试题
拓展培训心得体会
2014/01/04 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
毕业生面试求职信
2014/06/23 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
初一语文教学反思
2016/03/03 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS