用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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
js自带函数备忘 数组
Dec 29 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
python写的一个文本编辑器
2014/01/23 Python
Python open()文件处理使用介绍
2014/11/30 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
Django时区详解
2019/07/24 Python
Python3并发写文件与Python对比
2019/11/20 Python
python读取与处理netcdf数据方式
2020/02/14 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
详解Python中namedtuple的使用
2020/04/27 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
公务员爱岗敬业演讲稿
2014/08/26 职场文书
员工福利申请报告
2015/05/15 职场文书
创业计划书之面包店
2019/09/17 职场文书
python爬虫--selenium模块
2021/03/31 Python
python简单验证码识别的实现过程
2021/06/20 Python