【項目積累】對JSON資料的處理

標籤：error   機房   原因   div   star   ssdt   pass   weight   hit   

   【項目簡述】    

    接觸.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" >

這種JSON資料，肯定是不能被前台非常好地識別的，所以須要進行轉義。轉義後的JSON資料例如以下所看到的：

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

  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" >

    【項目心得】
     1.不要總是把焦點放在實現功能的那一刻。事實上，整個的實現過程。才是讓自己有非常大進步的源頭。     2.學習是不斷重複的。事情也是不斷變化的。

不同的場合。同樣的點，須要會做不同地處理。
     3.辦法總比困難多。

不要由於自己沒做過或者是認為自己做不到而放棄。多查、多想、多嘗試，最後迎接自己的一定會是成功的喜悅。

【項目積累】對JSON資料的處理