项目积累对JSON数据的处理
Posted zhchoutai
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目积累对JSON数据的处理相关的知识,希望对你有一定的参考价值。
【项目简述】
接触.NET项目非常长一段时间了,前台用的都是MVC框架。不知道大家是否想过一个问题。我们是怎样将数据显示到前台的,换句话说,MVC能够识别怎么样的数据形式?答案非常easy,就是JSON数据。不太记得的,最好还是找段代码看看。我们须要将数据显示到前台。一定会返回JSON类型的数据。
【博客概要】
眼下为止,JSON的应用我们都不陌生了。
但对于JSON的一些理论知识,你真正知道吗?或者说,你在项目调试的时候。以前有在前台alert过一个JSON串吗?有看过JSON串的内容是什么吗?以下我将带着大家回想一下JSON的理论知识,再以我在项目中遇到的问题为例。说说我对JSON数据所做的一些处理。
【JSON学习】
一.概述
JSON(javascript Object Notation) 是一种轻量级的数据交换格式,採用全然独立于语言的文
本格式,是理想的数据交换格式。同一时候。JSON是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON数据不需要不论什么特殊的 API 或工具包。
在JSON中,有两种结构:对象和数组。
1.对象
一个对象以“{”開始,“}”结束。每一个“key”后跟一“:”,“‘key/value’ 对”之间运用 “,”分隔。
packJson = {"name":"nikita", "password":"1111"}
2.数组
packJson = [{"name":"nikita", "password":"1111"}, {"name":"tony", "password":"2222"}];
数组是值的有序集合。一个数组以“[”開始,“]”结束。值之间运用 “,”分隔。
二、JSON对象和JSON字符串的转换
在传输数据流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。我在项目中就须要做这种处理。比如:
JSON字符串:
var jsonStr = ‘{"name":"nikita",
"password":"1111"}‘;
JSON对象:
var jsonObj = {"name":"nikita",
"password":"1111"};
2、String转换为Json
var myObject = eval(‘(‘
+ myJSONtext + ‘)‘);
eval是js自带的函数,不是非常安全。能够考虑用json包。
【项目实战】
一.JSON数据与EasyUI
datagrid的绑定
在考评系统中。须要对音频图片文件进行管理,第一点要做的就是在前台显示全部的文件列表。已对其进行查询和删除操作。
通过AJAX,我已经获取到了全部文件的JSON串,例如以下图所看到的:

在上面也提到过。JS操作的是JSON对象,所以原本以为仅仅须要将其转换为JSON对象就可以。但实际上,并没有成功地绑定到datagrid上。
后来在网上查到资料,才发现EasyUI datagrid与JSON数据的绑定事实上是有固定的參数的,正确格式应该是{"total":total,"rows":jsondata}.
这样与EasyUI datagrid数据绑定问题就攻克了。
部分代码例如以下:
前台html:
<div style="margin-top:20px;"> <table class="easyui-datagrid" id="fileList" style="width:500px;height:500px;" data-option="url:'/MongodbHelp/ProcessRequest'", fitColumns:true > <thead> <tr> <th data-options="field:'cn',width:30, checkbox:'true'"></th> <th data-options="field:'name',width:160,align:'center'">文件名称</th> <th data-options="field:'size',width:160,align:'center'">文件大小</th> <th data-options="field:'lastModify',width:220,align:'center'">近期更新时间</th> </tr> </thead> </table> </div>
JS方法。绑定数据:
////获取文件列表 function getFiles() { $.ajax({ type: 'POST', url: '/MongodbHelp/ProcessRequest', data: { action: "LIST", value: null, dateStart: null, dateEnd: null }, success: function (data) { //alert(data); var jsondata = JSON.parse(data); //alert(jsondata); var datasource = { total: 6, rows: jsondata } //alert(datasource); $('#fileList').datagrid('loadData', datasource); }, error: function (err) { alert("error!"); } }); };
二.JSON数据的字符转义处理
在MVC的Controller中。将DataTable转换为了JSON数据想要显示在前台。但获取到JSON数据并非想象中的那么完美。
在Controller中写的将DataTable转换为JSON。并存储到Session中的方法:
//得到已经插入的DataTable数据 DataTable successDt = dicDt[0]; DataTableToJson dtjson = new DataTableToJson(); //对DataTable进行一些处理,将表头替换为中文 DataTable dt; dt = ErrorDt.Clone(); dt.Columns.Remove("错误原因"); DataTable dtNew = successDt.Copy(); //复制successDt表数据结构 for (int i = 0; i < dtNew.Rows.Count; i++) { dt.Rows.Add(dtNew.Rows[i].ItemArray); //加入数据行 } //假设有正确导入的数据。则将正确导入的数据保存到session if (dicDt[0] != null) { //DataTable转换为JSON String json = dtjson.toJson(dt); //将JSON存在Session中,以便前台获取 Session["successjson"] = json; }
在JS中获得到Session,例如以下图所看到的:

这种JSON数据,肯定是不能被前台非常好地识别的,所以须要进行转义。转义后的JSON数据例如以下所看到的:

js代码例如以下:
<script type="text/javascript"> $(document).ready(function () { //获得session var successJson = '@Session["successjson"]'; //alert(successJson); //将JSON数据进行转义 var Json = successJson.replace(/"/gi, "\""); //alert(Json); }); </script>
三.JSON数据拼接为Table显示
这一问题是紧接第二个问题来的,我们在获取到了格式良好的JSON。下一步便是将它显示到前台了。但对于这些JSON数据。我们并没有不论什么能够承载它的List集合。
由于题型不同,显示的数据不同,表头不同。而题型至少有20来种,我们也不能为了将其显示到前台,就去为每一个题型写一个ViewModel集合。所以,我们採用动态拼接table的方法。
想了非常久。真的不知道该怎样去将一个JSON数据拼接为一个Table。就在机房又剩下我和平哥在加班的时候,偶然间。在网上找到了一个实例,真的是幸福来得太突然了。解决这个问题的办法已经找到了。以下就是见证成功的时刻了。
找到了一个插件,短短几行代码就能够解决我们的问题了。代码例如以下:
<title>题库管理——>试题管理</title> @*将JSON拼接为Table的引用*@ <script type="text/javascript" src="../libs/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../dist/jquery.jsontotable.min.js"></script> <script type="text/javascript" src="../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> @*对Table的样式设置*@ <style> .jsontotable table, .jsontotable th, .jsontotable td { border: 1px solid black; margin: 10px; } code { white-space: normal; } </style> </head> <body> @*Table区域*@ <div class="container"> <div id="jsontotable-obj" class="jsontotable" style="margin-top:30px;margin-left:20px;font-family:楷体;font-weight:bold;font-size:xx-large;"></div> </div> @*其他按钮*@ <div> <a id="OK" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" style="margin-top:450px;margin-left:880px;" onclick="OK()">完毕</a> </div> <div style="margin-top:-23px;"> <a id="back" class="easyui-linkbutton" data-options="iconCls:'icon-back'" style="margin-left:1000px;" onclick="back()">返回</a> </div> <script type="text/javascript"> $(document).ready(function() { //获得session var successJson = '@Session["successjson"]'; //Json转义处理 var obj1 = successJson.replace(/"/gi, "\""); //Json对象转为Json数组 var obj = '[' + obj1 + ']'; $("#jsontotable-obj") //标题 .append($("<h1 style='font-family:楷体;font-weight:bold;font-size:32px;'></h1>").html("查看题库")) //表格内容显示 $.jsontotable(obj, { id: "#jsontotable-obj", header: false }); }); </script> </body> </html>

1.不要总是把焦点放在实现功能的那一刻。事实上,整个的实现过程。才是让自己有非常大进步的源头。
2.学习是不断重复的。事情也是不断变化的。
不同的场合。同样的点,须要会做不同地处理。
3.办法总比困难多。
不要由于自己没做过或者是认为自己做不到而放弃。多查、多想、多尝试,最后迎接自己的一定会是成功的喜悦。
以上是关于项目积累对JSON数据的处理的主要内容,如果未能解决你的问题,请参考以下文章
[工作积累] UE4 并行渲染的同步 - Sync between FParallelCommandListSet & FRHICommandListImmediate calls(代码片段