【項目積累】對JSON數據的處理
阿新 • • 發佈：2017-08-03
陌生 fun item 樣式 orm 其他 ajax 數據顯示 真的
【博客概要】 眼下為止，JSON的應用我們都不陌生了。
【JSON學習】 一.概述 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式，採用全然獨立於語言的文 本格式，是理想的數據交換格式。同一時候。JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數據不需要不論什麽特殊的 API 或工具包。 在JSON中，有兩種結構：對象和數組。 1.對象 一個對象以“{”開始，“}”結束。每一個“key”後跟一“:”，“‘key/value’ 對”之間運用 “,”分隔。
一.JSON數據與EasyUI datagrid的綁定 在考評系統中。須要對音頻圖片文件進行管理，第一點要做的就是在前臺顯示全部的文件列表。已對其進行查詢和刪除操作。
通過AJAX，我已經獲取到了全部文件的JSON串，例如以下圖所看到的：
後來在網上查到資料，才發現EasyUI datagrid與JSON數據的綁定事實上是有固定的參數的，正確格式應該是{"total"：total，"rows"：jsondata}. 這樣與EasyUI datagrid數據綁定問題就攻克了。
在Controller中寫的將DataTable轉換為JSON。並存儲到Session中的方法：
【項目心得】
1.不要總是把焦點放在實現功能的那一刻。事實上，整個的實現過程。才是讓自己有非常大進步的源頭。 2.學習是不斷重復的。事情也是不斷變化的。
3.辦法總比困難多。
【項目簡述】
接觸.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’ 對”之間運用 “,”分隔。
一.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>
效果例如以下：
【項目心得】
1.不要總是把焦點放在實現功能的那一刻。事實上，整個的實現過程。才是讓自己有非常大進步的源頭。 2.學習是不斷重復的。事情也是不斷變化的。
不同的場合。同樣的點，須要會做不同地處理。
3.辦法總比困難多。
不要由於自己沒做過或者是認為自己做不到而放棄。多查、多想、多嘗試，最後迎接自己的一定會是成功的喜悅。
【項目積累】對JSON數據的處理