【项目简述】
但对于JSON的一些理论知识,你真正知道吗?或者说,你在项目调试的时候。以前有在前台alert过一个JSON串吗?有看过JSON串的内容是什么吗?以下我将带着大家回想一下JSON的理论知识,再以我在项目中遇到的问题为例。说说我对JSON数据所做的一些处理。

部分代码例如以下:
<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>////获取文件列表
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!");
}
});
}; //得到已经插入的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;
} 

<script type="text/javascript">
$(document).ready(function () {
//获得session
var successJson = '@Session["successjson"]';
//alert(successJson);
//将JSON数据进行转义
var Json = successJson.replace(/"/gi, "\"");
//alert(Json);
});
</script>由于题型不同,显示的数据不同,表头不同。而题型至少有20来种,我们也不能为了将其显示到前台,就去为每一个题型写一个ViewModel集合。所以,我们採用动态拼接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> 
不同的场合。同样的点,须要会做不同地处理。
不要由于自己没做过或者是认为自己做不到而放弃。多查、多想、多尝试,最后迎接自己的一定会是成功的喜悦。
原文:http://www.cnblogs.com/zhchoutai/p/7281230.html