用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固定底网站底部菜单效果
Aug 13 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
node.js操作mysql简单实例
May 25 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
JS运动特效之任意值添加运动的方法分析
Jan 24 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 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 字符串函数收集
2010/03/29 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python基于Selenium的web自动化框架
2019/07/14 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
借款协议书范本
2014/04/22 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技
Python如何加载模型并查看网络
2022/07/15 Python