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>

效果如下：

巴特西

Json数据处理协议与办法

最新文章

热门文章