【项目积累】对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，例如以下图所看到的：

    

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

    

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

 
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>  

效果例如以下：

    

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

  【项目心得】

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

     2.学习是不断重复的。事情也是不断变化的。

不同的场合。同样的点，须要会做不同地处理。

     3.办法总比困难多。

不要由于自己没做过或者是认为自己做不到而放弃。多查、多想、多尝试，最后迎接自己的一定会是成功的喜悦。