【项目积累】对JSON数据的处理

   【项目简述】    

    接触.net项目很长一段时间了，前台用的都是mvc框架。不知道大家是否想过一个问题，我们是如何将数据显示到前台的，换句话说，mvc可以识别怎么样的数据形式？答案很简单，就是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：

js方法，绑定数据：

二.json数据的字符转义处理    

        在mvc的controller中，将datatable转换为了json数据想要显示在前台，但获取到json数据并不是想象中的那么完美。

        在controller中写的将datatable转换为json，并存储到session中的方法：

 在js中获得到session，如下图所示：

这样的json数据，肯定是不能被前台很好地识别的，所以需要进行转义，转义后的json数据如下所示：

js代码如下：

三.json数据拼接为table显示 

        这一问题是紧接第二个问题来的，我们在获取到了格式良好的json，下一步便是将它显示到前台了。但对于这些json数据，我们并没有任何可以承载它的list集合。因为题型不同，显示的数据不同，表头不同，而题型至少有20来种，我们也不能为了将其显示到前台，就去为每个题型写一个viewmodel集合，所以，我们采用动态拼接table的方法。

        想了很久，真的不知道该如何去将一个json数据拼接为一个table。就在机房又剩下我和平哥在加班的时候，偶然间，在网上找到了一个实例，真的是幸福来得太突然了。解决问题的办法已经找到了，下面就是见证成功的时刻了。

        找到了一个插件，短短几行代码就可以解决我们的问题了。代码如下：

    效果如下：

    【项目心得】

     1.不要总是把焦点放在实现功能的那一刻，其实，整个的实现过程，才是让自己有很大进步的源头。

     2.学习是不断反复的，事情也是不断变化的。不同的场合，相同的点，需要会做不同地处理。

     3.办法总比困难多。不要因为自己没做过或者是觉得自己做不到而放弃，多查、多想、多尝试，最后迎接自己的一定会是成功的喜悦。