Json數據處理協議與辦法

時間 2019-11-09

標籤 json 數據處理協議辦法欄目 JavaScript 简体版

原文原文鏈接

【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"}];

數組是值的有序集合。一個數組以「[」開始，「]」結束。值之間運用「,」分隔。

2、JSON對象和JSON字符串的轉換

在數據傳輸流程中，json是以文本，即字符串的形式傳遞的，而JS操做的是JSON對象，因此，JSON對象和JSON字符串之間的相互轉換是關鍵。我在項目中就須要作這樣的處理。例如：

JSON字符串：

var jsonStr = '{"name":"nikita", "password":"1111"}';

JSON對象：

var jsonObj = {"name":"nikita", "password":"1111"};

二、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>

效果以下：