the JSONLearning
I. OverviewJSON (JavaScript Object Notation) is a lightweight data interchange format that is ideal for data interchange formats in a completely language-independent text format. At the same time, JSON is a native JavaScript format, which means that working with JSON data in JavaScript does not require any special APIs or toolkits. In JSON, there are two kinds of structures: objects and arrays.
1. ObjectsAn object ends with "{" Starting with "}". Each "key" followed by a ":", "' Key/value ' pair" is applied "," separated. Packjson = {"Name": "Nikita", "Password": "1111"}
2. ArraysPackjson = [{"Name": "Nikita", "Password": "1111"}, {"Name": "Tony", "Password": "2222"}]; An array is an ordered collection of values. An array ends with "[" Start, "]". Use "," to separate values.
Ii. Conversion of JSON objects and JSON stringsIn the data transfer process, JSON is passed in the form of text, which is a string, and JS operates on a JSON object, so the conversion between the JSON object and the JSON string is key. I need to do this in my project. For example:
JSON string:var jsonstr = ' {' name ': ' Nikita ', ' Password ': ' 1111 '} ';
JSON object:var jsonobj = {"Name": "Nikita", "Password": "1111"}; 2, string converted to json var myObject = eval (' (' + myjsontext + ') '); Eval is a function of JS, not very safe, you can consider the JSON package.
"Project Combat"
I. JSON data and
Easyui the DataGrid bindingsIn the evaluation system, the audio image file needs to be managed, the 1th thing to do is to display all the file list in the foreground, it has been queried and deleted operations. Through Ajax, I've got the JSON string for all the files, as shown in:
As mentioned above, JS operates on JSON objects, so it is thought that you only need to convert them to JSON objects. But in fact, it was not successfully bound to the DataGrid. Later on the Internet to find information, only found that the Easyui DataGrid and JSON data binding is actually a fixed parameter, the correct format should be {"Total": All, "Rows": Jsondata}. This solves the problem with the Easyui DataGrid data binding. Some of the code is as follows: Foreground 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 ' "> FileName </th> <th data-options=" field: ' Size ', width:160,align: ' Center ' "> File size </th> <th data-options= "field: ' Lastmodify ', width:220,align: ' Center '" > Last updated time </th> </tr> </thead></table></div>
JS method, binding data:
Get file list 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!"); } } );
two. Character escaping from JSON data In an MVC controller, convert a DataTable to JSON data that you want to display in the foreground , but getting to JSON data is not as perfect as it might seem. Methods written in the controller that convert a DataTable to JSON and stored in the session:
Get the DataTable data that has been inserted datatable SUCCESSDT = dicdt[0]; Datatabletojson Dtjson = new Datatabletojson (); To do some processing of the DataTable, replace the table head with the Chinese DataTable dt; DT = Errordt.clone (); Dt. Columns.remove ("Cause of Error"); DataTable dtnew = Successdt.copy (); Copy the SUCCESSDT table data structure for (int i = 0; i < DtNew.Rows.Count; i++) { dt. Rows.Add (Dtnew.rows[i]. ItemArray); Add data row } //If you have correctly imported data, save the correctly imported data to the session if (dicdt[0]! = null) { //datatable converted to JSON String json = dtjson.tojson (DT); The JSON exists in the Session so that the foreground gets session["successjson" = JSON; }
In JS to get to the session, as shown: Such JSON data, must not be well recognized by the foreground, so need to be escaped, the escaped JSON data is as follows: JS code is as follows:
<script type= "Text/javascript" > $ (document). Ready (function () { //Get session var Successjson = ' @ session["Successjson"]; alert (Successjson); To escape the JSON data var json = successjson.replace (/"/gi," \ ""); alert (Json); }); </script>
three. JSON Data stitching for table displayThis question comes immediately after the second question, and we are getting a well-formed JSON, and the next step is to show it to the foreground. But for these JSON data, we don't have any list collection that can host it. Because of different types of questions, the data displayed is different, the table header is different, and the question type at least 20来 species, we can not display it to the foreground, to write a viewmodel set for each type of question, so, we use dynamic splicing table method. Think for a long time, really do not know how to get a JSON data to be stitched into a table. In the machine room and left me peace elder brother in overtime, accidentally, found an instance on the Internet, really is happiness came too suddenly. The solution to the problem has been found, the following is the time to witness success. Found a plug-in, just a few lines of code can solve our problem. The code is as follows:
<title> Item Management--Question management </title> @* json into a table reference *@ <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> @* style settings for table *@ <style>. Jsontotab Le table,. jsontotable th,. jsontotable td {BORDER:1PX solid black; margin:10px; } code {white-space:normal; } </style> The effect is as follows:JSON data processing protocol and method