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